0

ユーザーが特定の div をクリックした場合、each() ループを停止しようとしています。別の div をクリックすると、ループを続行します (元の要素から)。

問題は、彼がストップ div をクリックした場合に変数 (true/false) を作成し、それを各関数に渡そうとすることです。ただし、各関数は初期状態の変数値のみを取得し、ループごとにこの false/true 値を使用します。

また、続行ボタンを押したときにループを続行したいと思います。

ここにjsFiddleがあります。

var stopp = false;

$('.a').each(function (i) {

    $(this).delay(i * 1000).animate({
        opacity: 0
    }, {
        duration: 1000,
        complete: function () {
            $(this).appendTo('#container2').css({
                opacity: 1
            })
        }
    });

    if (stopp == true) { //This value is always false
        return false;
    }

});

$('#button_stop').on('click', function () {

    stopp = true;

});

$('#button_continue').on('click', function () {

    stopp = false;

});
4

2 に答える 2

0

stoppループは即座に実行され、アニメーションがキューに入れられるため、各ループ内をチェックしても意味がありません。これは、各.a. 代わりに、ボタンをクリックしてアニメーションを停止し、アニメーションを再開することができます。

これを試して：

 function animate() {
   $('.a', '#container1').each(function (i) { // get the boxes in container1 alone.

        $(this).delay(i * 1000).animate({
            opacity: 0
        }, {
            duration: 1000,
            complete: function () {
                $(this).appendTo('#container2').css({
                    opacity: 1
                })
            }
        });
    });
}

$('#button_stop').on('click', function () {

    $('.a').stop(true, true, true); // Stop the animation

});

$('#button_continue').on('click', function () {
   animate(); // Animate again.
});

animate(); //initail startup

フィドル

于 2013-06-19T02:27:37.790 に答える