Question

我在minifiedjs.com上使用该库。使用该脚本，我有两次div闪烁：

vbox1.animate({$backgroundColor: 'grey'}, 100)
.then(function() { return vbox1.animate({$backgroundColor: 'transparent'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'grey'}, 100) })

如您所见，它只是将背景设置为灰色，返回透明，然后再将灰色设置为灰色。问题是，我希望这个div闪烁X次。

我知道我可以通过简单地链接更多.then()动画来实现这一目标;但这似乎有点重复。有人介意帮我清理这个吗？

vbox1.animate({$backgroundColor: 'grey'}, 100)
.then(function() { return vbox1.animate({$backgroundColor: 'transparent'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'grey'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'transparent'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'grey'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'transparent'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'grey'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'transparent'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'grey'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'transparent'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'grey'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'transparent'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'grey'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'transparent'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'grey'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'transparent'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'grey'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'transparent'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'grey'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'transparent'}, 100) })
.then(function() { return vbox1.animate({$backgroundColor: 'grey'}, 100) })

Answer 1

承诺的方式：

function next() { 
   return vbox1.animate({$backgroundColor: 'transparent'}, 100)
      .then(function() { return vbox1.animate({$backgroundColor: 'grey'}, 100) })
      .then(next.total-- ? next : Boolean);
}

next.total=100;
vbox1.animate({$backgroundColor: 'grey'}, 100).then(next);

我使用 next.total 而不是 x ，但主要的想法是从尾部自我调用，直到你完成而不是在你之前循环/排队时间。

编辑：

作为可重复使用（允许自定义目标，延迟和代表数量）：

function animateMyStuff(target, period, reps){
   reps=+reps||100; //default and coerce to real number
   period=+period||100; //default and coerce to real number

    function next() { 
       return target.animate({$backgroundColor: 'transparent'}, period)
          .then(function() { return target.animate({$backgroundColor: 'grey'}, period) })
          .then(reps-- ? next : Boolean);
    }

    return target.animate({$backgroundColor: 'grey'}, period).then(next);
}

像以前一样使用：animateMyStuff(vbox1, 100, 100);，或使用默认值animateMyStuff(vbox1);

Answer 2

使用循环：

var animation = vbox1.animate({$backgroundColor: 'grey'}, 100)
     .then(function() { return vbox1.animate({$backgroundColor: 'transparent'}, 100) });
for (var i=0; i < numberOfBlinks - 1; i++) {
    animation = animation.then(function() { return vbox1.animate({$backgroundColor: 'grey'}, 100) })
                .then(function() { return vbox1.animate({$backgroundColor: 'transparent'}, 100) });
}

您只需根据需要添加.then个。{/ p>

重复MinifiedJS功能X次？

2 个答案: