関数間のsetTimeoutsが機能しないのはなぜですか？

Question

私は、特定のシーケンスで実行したい一連のグラフィカルアニメーションを用意しています。

1. カーブをフェードインします。
2. ボールをフェードインします。
3. カーブに沿ってボールをアニメートします。

私は各機能の間にsetTimeoutを持っていますが、アニメーションはただ同時に起動します。

View it on JSFiddleかここに：のような

Raphael("bounce", 640, 480, function() { 
     var r = this, 
      p =     r.path("M0,77.255c0,0,269.393,37.431,412.96,247.653 c0,0,95.883-149.719,226.632-153.309").attr({stroke: "#666", opacity: .0, "stroke-width": 1}), 
      len = p.getTotalLength(), 
     e = r.circle(0, 0, 7).attr({stroke: "none", fill: "#000", opacity:0}).onAnimation(function() { 
       var t = this.attr("transform"); 
      }); 
     r.customAttributes.along = function (v) { 
      var point = p.getPointAtLength(v * len); 
      return { 
       transform: "t" + [point.x, point.y] + "r" + point.alpha 
      }; 
     }; 
     e.attr({along: 0}); 

     var rotateAlongThePath = true; 
     function fadecurve(ca,ba,aa,ab){ 
      ca.animate({opacity:1},2000); 
      setTimeout(fadeball(ba,aa,ab),6000); 
     } 
     function fadeball(ba,aa,ab) { 
       ba.animate({opacity:1},400); 
       setTimeout(run(ba, aa,ab),5000); 
     } 
     function run(ba,aa,ab) { 
       ba.animate({opacity:1},400); 
       ba.animate({along: aa}, ab, ">", function() { 
       ba.attr({along: aa}); 
      }); 
     } 
     fadecurve(p,e,.9,500); 
}); 

Answer 1

使用無名関数：setTimeout(fadeball(ba,aa,ab),6000);機能fadeballで

setTimeout(function(){ 
    fadeball(ba,aa,ab); 
},6000); 

は、すぐに問題があるためであるものです()で呼び出されます。

は道も:)

Answer 2

あなたはすぐにあなたの関数を呼び出すと、その後setTimeoutにその関数の結果を渡しているrun関数を呼び出していることを確認してください。代わりにsetTimeoutに関数を渡す必要があります。

setTimeout(function(){ 
    fadeball(ba,aa,ab); 
},6000); 

Answer 3

あなたのsetTimeoutの内側に参照するあなたの機能に問題の嘘

setTimeout(fadeball(ba,aa,ab),6000); 

あなたが関数を実行して、その結果を代入され、ここでやっていますあなたのsetTimeoutの最初の引数、もしあなたが無名関数を使っても問題ありません。あなたが連続してアニメーションを発射できるよう

setTimeout(function(){ 
    fadeball(ba,aa,ab); 
},6000); 

Answer 4

jQueryのアニメーション機能は、アニメーション、完全なコールバックがあります。

function SecondAnimation() { $('element').animate(....., ThirdAnimation); } 
function ThirdAnimation() { $('element').animate(....., FourthAnimation); } 
function FourthAnimation() { $('element').animate(.....); } 


$('element').animate(....., SecondAnimation); 

Answer 5

これはオフトピックである場合、私は申し訳ありませんが、しかし、あなたはこれをやっている方法がありますスケーラブルではありません。このような繰り返しタイムアウトをいくつかの関数で設定すると、ステップの数が増えるほどマルチステップアニメーションはますます面倒になります。 jQueryはアニメーションをシーケンスできますが、しばしばjQueryのビルトインアニメーションキューは必要な機能（ウォーターフォールプロパティなど）を提供しません。 Frame.jsでより簡潔で強力でスケーラブルな代替案があります。

var ca = p, ba = e, aa = .9, ab = 500; 
    Frame(500, function(next){ 
     ca.animate({opacity:1}, 2000, next); 
    }); 
    Frame(4000, function(next){ 
     ba.animate({opacity:1}, 400, next); 
    }); 
    Frame(5000, function(next){ 
     ba.animate({opacity:1}, 400); 
     ba.animate({along: aa}, ab, ">", next); 
    }); 
    Frame(function(next){ 
     ba.attr({ along: aa }); 
     next(); 
    }); 
    Frame.init();