Question

如果用户点击某个div，我试图停止一个each（）循环，然后如果他点击另一个div继续循环（来自元素）。

问题是，如果他点击停止div，我会创建一个变量（true / false），并尝试将其传递给每个函数。但是，每个函数仅在其初始状态中采用变量值，并对每个循环使用此false / true值。

我还想按下继续按钮时继续循环。

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;

});

Answer 1

每个循环内部都没有检查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

Fiddle

Answer 2

您可以使用.delay()：

，而不是使用setInterval

var timer;

function timerFunction() {
    var $elem = $('#container1 .a').first();

    if (!$elem.length) {
        clearInterval(timer);
        return;
    }

    $elem.fadeOut(function () {
        $(this).appendTo('#container2').show();
    });
}

$('#button_stop').on('click', function () {
    clearInterval(timer);
});

$('#button_continue').on('click', function () {
    timer = setInterval(timerFunction, 1000);
}).trigger('click');

演示：http://jsfiddle.net/EDGrk/11/

根据变量停止each（）循环，然后从该元素继续它（jQuery）

2 个答案:

Fiddle