1

我正在使用 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) })
4

2 回答 2

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);

于 2015-02-26T20:49:19.463 回答
0

使用循环：

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。

于 2015-02-26T20:40:02.557 回答