javascript - jQuery fadeOut() 和 fadein() 计时

Question

我对 jQuery 有一个简单的问题，请查看：http: //jsfiddle.net/4Q5uQ/

fadeOut() 效果完成后如何对盒子进行fadeIn()？

Answer 1

我想你想要两件事：

1. 褪色<div>的 s 应该在同一个地方，这样它们就不会四处移动。
2. 你想淡出可见的<div>，然后淡入另一个<div>。

第一个可以通过将两个<div>s包裹在一个相对定位<div>然后绝对定位内部<div>s来完成：

<div class="wrapper">
    <div id="div_1" data="1" class="box">
        test_1
    </div>
    <div id="div_2" data="2" class="box">
        test_2
    </div>
</div>

和：

div.wrapper {
    position: relative;
}
div.box {
    /* ... */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

第二个只是添加:visible到您的fadeOut选择器的问题：

$(".box:visible").fadeOut(1000, ...

更新小提琴：http: //jsfiddle.net/ambiguous/jAP2b/

Answer 2

您可能需要以下代码：http: //jsfiddle.net/4Q5uQ/5/

$(document).ready(function() {
    $("a").click(function() {
        var fin = $(this).attr('fin');
        var fout = $(this).attr('fout');
        $("#div_" + fout).show();
        $("#div_" + fin).hide();
        $(".box[data=" + fout + "]").fadeOut(4000, function() {
            $(".box[data=" + fin + "]").fadeIn(4000);
        });
    });
});