2

2 つのコンテンツを切り替えたい。これに関する特別な点は、要素が順番にフェードアウトおよびフェードインする必要があることです。私の問題は、最初のフェードアウト/フェードインが機能することですが、プロセスを再度トリガーしても何も起こりません。再現するには、上部の 3 つのリンクを 1 つずつクリックしてから、Box1 に戻ります。

編集:ああ、確かに、jsfiddle: http://jsfiddle.net/UANvC/

コード スニペット:

<!DOCTYPE HTML>
<html>
    <head>
            <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
            <link href="style.css" rel="stylesheet" />
            <script src="jquery-1.7.2.min.js" ></script>
    </head>


    <body>
            <a href="" id="start">start</a>
            <a href="" id="button1">one</a>
            <a href="" id="button2">two</a>

            <div id="boxes">
            <div id="box1" class="invisible"><p>box1</p></div>
            <div id="box2" class="invisible"><p>box2</p></div>
            </div>

            <div id="box11" class="box box1">box11</div>
            <div id="box12" class="box box1">box12</div>
            <div id="box13" class="box box1">box13</div>
            <div id="box14" class="box box1">box14</div>
            <div id="box15" class="box box1">box15</div>


            <div id="box21" class="box box2">box21</div>
            <div id="box22" class="box box2">box22</div>
            <div id="box23" class="box box2">box23</div>
            <div id="box24" class="box box2">box24</div>
            <div id="box25" class="box box2">box25</div>


            <script src="script.js" ></script>

    </body>
</html>

CSS:

.invisible {
    display: none;
}
#boxes {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}
#boxes p {
    width: 300px;
    height: 300px;
}
.box {
    float:left;
    width: 50px;
    height: 50px;
    border: 1px solid #ccc;
    display: none;
}

Javascript:

function showBox1() {
    $('.box1').each(function(key, value) {
        $(this).delay(50 * (key)).fadeIn(200, function() {
                $('#box1').fadeIn(200);
        });
    });
}
function showBox2() {
    $('.box2').each(function(key, value) {
        $(this).delay(50 * (key)).fadeIn(200, function() {
                $('#box2').fadeIn(200);
        });
    });
}
function hideBox1(callback) {
    $('.box1').each(function(key, value) {
        $(this).delay(50 * (key)).fadeOut(200);
    });
    $('#box1').delay(50*6).fadeOut(200).delay(50*7, function() {
            callback();
    });
}
function hideBox2(callback) {
    $('.box2').each(function(key, value) {
        $(this).delay(50 * (key)).fadeOut(200);
    });
    $('#box2').delay(50*6).fadeOut(200).delay(50*7, function() {
            callback();
    });
}

$('#start').on('click', function() {
    showBox1();
    return false;
});
$('#button1').on('click', function() {
    hideBox1(function() {
            showBox2();
    });
    return false;
});
$('#button2').on('click', function() {
    hideBox2(function() {
        showBox1();
    });
    return false;
});
4

1 に答える 1

1

編集

いくつかのテストの後、解決策を見つけましたが、この問題についての説明はありません. ボックス 1 またはボックス 2 の各アニメーションの前に、デキュー関数を呼び出します。

説明を見つけたら、私はそれを読むことに興味があります。

コードバージョン 2

function showBox1() {
    $('.box1').each(function(key, value) {
        $(this).delay(50 * (key)).fadeIn(200)
    });
    $('#box1').dequeue();
    $('#box1').fadeIn(200);
}
function showBox2() {
    $('.box2').each(function(key, value) {
        $(this).delay(50 * (key)).fadeIn(200)
    });
    $('#box2').dequeue();
    $('#box2').fadeIn(200);
}
function hideBox1(callback) {
    $('.box1').each(function(key, value) {
        $(this).delay(50 * (key)).fadeOut(200);
    });
    $('#box1').dequeue();
    $('#box1').delay(50*6).fadeOut(200).delay(50*7, callback);
}
function hideBox2(callback) {
    $('.box2').each(function(key, value) {
        $(this).delay(50 * (key)).fadeOut(200);
    });
    $('#box2').dequeue();
    $('#box2').delay(50*6).fadeOut(200).delay(50*7, callback);
}



$('#start').click(function() {
    showBox1();
    return false;
});
$('#button1').click(function() {
    hideBox1(showBox2);
    return false;
});
$('#button2').click(function() {
    hideBox2(showBox1);
    return false;
});

Jsfiddle の例はこちらです。1 つと 2 つをクリックする速度が速すぎるとバグが発生します

于 2012-08-30T08:25:45.880 に答える