Question

jQuery 交替显示如何写？

使用 jQuery 1.32。

有一个主框架 MainBox，里面有两个大小固定的 Box：box 1 和 box 2。

代码如下：

<div id=mainbox>
<div id=box1><p></p><img><div>...</div>
<div id=box2><p></p><img><div>...</div>
</div>

想要这两个 Box 交替显示，提供一下渐变淡入淡出和滑动的代码。

Box1 和 Box2 里面的内容布局和位置不能变。

Answer 1

$("#mainbox").toggle(function(){
//隐藏box1显示box2
$("#box1").slideUp();
$("#box2").slideDown();
},function(){
//隐藏box2显示box1
$("#box2").slideUp();
$("#box1").slideDown();
});

如果想淡入淡出的话用fadeIn()和fadeOut()替换slideUp(),slideDown()
现在的效果是点击后切换

Answer 2

$(document).ready(function() {
$box1 = $('#box1');
$box2 = $('#box2');

function fo1() {
$box1.fadeOut("slow", function(){
$box1.hide();
$box2.fadeIn("slow", fo2);
});
}

function fo2() {
$box2.fadeOut("slow", function(){
$box2.hide();
$box1.fadeIn("slow", fo1);
});
}

$box2.hide();
fo1();
});

以上是淡入淡出的代码。
滑动只需要把 fadeIn 和 fadeOut 改成 slideUp 和 slideDown。

Answer 3

搜一下jquery插件，像这种多的是