jQuery的幻灯片效果

我想用jQuery创建幻灯片效果。我有几个div的：jQuery的幻灯片效果

<div id='div_1'>content currently displayed</div> 
<div id='div_2' style="display:none">content to be loaded</div> 
<div id='div_3' style="display:none">content to be loaded</div>

的想法是，div_2出现，而滑动和“推” div_1淡出人们的视线，有点像滚动的窗口（水平或垂直）。我想我不能使用实际的滚动，因为div的内容是通过ajax加载的，所以我无法在加载之前精确定位它。

任何想法？

TIA

格雷格

来源

2010-08-17 greg

格雷格，这听起来像你正在寻找的东西像我这样做这里：

http://jsfiddle.net/2E5Qv/

如果是这样，你想要做的就是将所有这些<div> s包含在父级中，然后当你想滑动它们时，在每个div的顶部设置正确的像素数。我上面提供的解决方案将每个<div>或多或少设置为20px的固定高度（通过line-height）。

父母<div>充当一种仅显示当前内容的窗口。

来源

2010-08-17 17:52:15 Ender

谢谢，这正是我正在寻找的效果。我试过这种方式（滚动），但由于内容的ajax加载而不成功。我会再试一次，并提出一些更详尽的代码示例。 – greg 2010-08-17 21:04:57

你的意思是这样的：

$('#div_2').slideDown('slow', function(){ 
    $('#div_1').slideUp('slow'); 
});

See the working demo here.

来源

2010-08-17 15:09:58 Sarfraz

哇，那太快了！它是这样的，但我希望div_1被“推”，即滑动... – greg 2010-08-17 15:23:09

@greg：第一个div不会滑动，因为它已经显示。 – Sarfraz 2010-08-17 15:31:18

我采取了Sarfraz提供的内容，并根据我认为您所寻找的内容稍微修改了它。为了演示的目的，我也在点击事件中激发了它。你可以在这里找到工作示例：http://jsbin.com/emowu3/3

$('#div_1').click(function(){ 
    $('#div_1').slideUp('slow'); 
    $('#div_2').slideDown('slow'); 
}); 
$('#div_2').click(function(){ 
    $('#div_2').slideUp('slow'); 
    $('#div_3').slideDown('slow'); 
}); 
$('#div_3').click(function(){ 
    $('#div_3').slideUp('slow'); 
    $('#div_1').slideDown('slow'); 
});

来源

2010-08-17 18:17:11 TehOne

感谢您的回答:) – greg 2010-08-17 21:05:33

jQuery的幻灯片效果

回答

相关问题