用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看不见时出现，有点像滚动窗口（水平或垂直）。我认为我无法使用实际滚动，因为Divs的内容正在通过Ajax加载，因此我无法在加载之前精确定位它。

任何的想法？

tia

格雷格

Answer 1

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

http://jsfiddle.net/2e5qv/

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

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

Answer 2

你的意思是这样：

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

在这里查看工作演示。

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