0

如果用户单击某个 div，我试图停止 each() 循环，然后如果他单击另一个 div，则继续循环（从元素开始）。

问题是如果他单击停止 div，我正在创建一个变量（真/假），并尝试将其传递给每个函数。然而，每个函数仅在其初始状态下获取变量值，并为每个循环使用此假/真值。

如果按下继续按钮时，我也想继续循环。

这是一个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 回答
0

而不是使用.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/

于 2013-06-19T02:35:14.537 回答