Javascript jquery的幻灯片效果

我想使用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时出现，有点像滚动窗口（水平或垂直）。我想我不能使用实际的滚动，因为divs的内容是通过ajax加载的，所以我不能在加载之前准确地定位它

有什么想法吗

短暂性脑缺血发作

格雷格你的意思是这样的：

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

---

格雷格，听起来你在寻找我在这里所做的事情：

如果是这样，您要做的是将所有这些

包含在父级中，然后当您要滑动它们时，将每个div的顶部设置为正确的像素数。我在上面提供的解决方案将每个

或多或少地设置为20px的固定高度（通过

行高

）

---

父级

充当一种窗口，仅显示当前内容。

我采用了Sarfraz提供的内容，并根据我认为您需要的内容对其进行了轻微修改。为了演示，我还让它在点击事件中启动。您可以在此处找到工作示例：

---

哇，太快了！很像这样，但我想让第一个div_1被“推”，也就是滑动…@greg:第一个div不会滑动，因为它已经显示出来了。谢谢，这正是我想要的效果。我尝试了这种方式（滚动），但没有成功，因为ajax加载了内容。我将再试一次，并提供一些更详细的代码示例。

$('#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');
});