javascript - jquery的幻灯片效果

Question

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

<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

格雷格

Answer 1

你的意思是这样的：

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

在此处查看工作演示。

Answer 2

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

http://jsfiddle.net/2E5Qv/

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

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

Answer 3

我采用了 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');
});