jquery的幻灯片效果答案

【问题标题】：slide effect with jqueryjquery的幻灯片效果
【发布时间】：2010-08-17 15:07:25
【问题描述】：

我想使用 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

格雷格

【问题讨论】：

标签： javascript jquery visual-effects

【解决方案1】：

你的意思是这样的：

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

See the working demo here.

【讨论】：

哇，真快！很像这样，但我希望 div_1 被“推动”，即也滑动...
@greg: 第一个 div 不会滑动，因为它已经显示出来了。

【解决方案2】：

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

http://jsfiddle.net/2E5Qv/

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

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

【讨论】：

谢谢，这正是我正在寻找的效果。我尝试过这种方式（滚动），但由于内容的ajax加载而没有成功。我会再试一次并放一些更详细的代码示例。

【解决方案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');
});

【讨论】：