1

minifiedjs.com のライブラリを使用しています。そのスクリプトを使用すると、div が 2 回点滅します。

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

ご覧のとおり、背景を灰色に設定し、透明に戻し、再び灰色に戻すだけです。X問題は、この div を何度も点滅させたいことです。

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

xの代わりにnext.totalを使用しますが、主なアイデアは、事前にループ/キューイングする代わりに、終了するまで末尾から自己呼び出しすることです。

編集：

再利用可能なものとして (カスタム目標、遅延、担当者数を許可):

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 に答える