每个 Jquery 后触发函数

Question

    var delay = 0;
    var interval = 1000;
    var reload = function() {
    setTimeout(function(){
        $('.bl').each(function(i){ 
            $(this).delay(delay).animate({
                height: '150px'
            },500);
            delay += interval;
        });
    },interval);

setInterval(reload,delay);

大家好，方块全部出现后无法隐藏。

Answer 1

这是一个不使用计时器的示例，仅使用从每个元素的动画队列返回的动画承诺：

 var interval = 1000;
 var reload = function () {
     var delay = 0;
     var promise;   // "Undefined" equates to an initial resolved promise
     $('.bl').css({
         height: 0
     }).each(function (i) {
         // chain promises in parallel using repeated $.when calls
         promise = $.when(promise, $(this).delay(delay).animate({
             height: '150px'
         }).promise());
         delay += interval;
     });
     // When all animation promises complete, start the process pseudo-recursively
     promise.then(reload);
 }
 reload();

JSFiddle: http://jsfiddle.net/TrueBlueAussie/rtuLzc6t/

唯一偷偷摸摸的是我使用 promise = $.when(promise, newpromise) 并行链接承诺。循环的最终结果是在所有动画结束时完成的单一承诺。最后的 then 使其递归。

每个 Jquery 后触发函数

trigger function after each Jquery

each

jquery

settimeout

setinterval