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

See the working demo here.

Answer 2

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

http://jsfiddle.net/2E5Qv/

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

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

Answer 3

我接受了Sarfraz提供的内容，并根据我认为您正在寻找的内容略微修改了它。为了演示，我还点击了click事件。您可以在此处找到工作示例：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');
});

用jquery滑动效果

3 个答案: