jQuery fadeOut() and fadein() timing

Question

我有一个简单的jQuery问题，检查这个:http://jsfiddle.net/4Q5uQ/

如何fadeIn()框后的fadeOut()效果完成?

Answer 1

我认为你需要两件事:

1. 衰落的<div>应该在同一个地方，这样它们就不会移动。
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);
        });
    });
});