javascript - jQueryのfadeOut()とfadein()のタイミング

Question

私はjQueryで簡単な問題を抱えています。これをチェックしてください：http://jsfiddle.net/4Q5uQ/

フェードアウト()効果が完了した後にボックスをフェードイン()する方法は?

Answer 1

私はあなたが2つのことを望んでいると思います：

1. フェージング<div>は​​、動き回らないように同じ場所に配置する必要があります。
2. 表示されているものをフェードアウトしてから<div>、もう一方をフェードインし<div>ます。

<div>最初の方法は、2つの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;
}

2つ目は、セレクターに追加: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);
        });
    });
});