Question

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

如何在fadeOut（）效果完成后淡出（）框？

Answer 1

我认为你想要两件事：

褪色<div>应位于同一位置，以免它们四处移动。
您希望淡出可见的<div>，然后淡出其他<div>。

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

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

jQuery fadeOut（）和fadein（）计时

2 个答案: