複数のアニメーションを同じページで同期させるにはどうすればよいですか？

Question

私の問題は、アニメーションを同期させておくことで、互いに絡み合ってしまうのを防ぐことではないと思います。

私は二つのアニメーションを持っています、同じページに2つのサパラートdocument.readyメソッドです。それらのうちの1つは周期的に3つの画像（CSSクラスg_imgに属する）を周期的にフェードインしてフェードアウトし、他の3つの画像は（クラスslogansに属する）これらのそれぞれのアニメーションを実行する各機能は、document.readyの機能に別々に含まれているときとまったく同じように機能しますが、以下に示すコードのように一緒に組み込むと、奇妙な動作をします。
たとえば、そのうちの1つが通常の1,2,3,1,2,3...の代わりに1,2,2,1,3,2,1,3,2,1,3,2...というシーケンスでアニメートされます。アニメーションを同じdocument.readyの関数に配置したとしても、私は上記と同様のものを得ました。これをどうすれば解決できますか？

Ps：建設中のページを次のURLのhttp://mygeneric.info/green/index.htmlにアップロードしました。実際に何が起こっているのかを実際に視覚化することができます。このページはFirefoxで意図したとおりに表示されないことに注意してください。まだそれに取り組む必要があります。 firefox以外のブラウザを使用してください。

<script type = "text/javascript"> 
$(document).ready(function() { 
    //First image in non js compliant browsers is by default displayed. 
    //Hide it for compliant browsers 
    $("#green_car").hide; 

    //Do same for the first slogan(smart business). 
    //Smaart business is positioned to be displayed for non js browsers. 
    $(".slogans").hide(); 
    $("#smart_business").css("left","245px"); 

    (function($) { 
     //The fade in out function. 
     $.fn.fader = function() { 
      var elements = this; 
      l = elements.length; 
      i = 0; 

      function execute() { 
       var current = $(elements[i]); 
       i = (i + 1) % l; 
       current 
        .fadeIn(1000) 
        .delay(8000) 
        .fadeOut(1000,execute); 
      } 
      execute(); 
      //Run the function. 
      return this; 
      //Making this available again to the outer function. 
     }; 
    })(jQuery); 

    $(".g_img").fader(); 
}); 
</script> 


<script type = "text/javascript"> 
$(document).ready(function() { 
    //Do same for the first slogan(smart business). 
    //Smaart business is positioned to be displayed for non js browsers. 
    $(".slogans").hide(); 
    $("#smart_business").css("left","245px"); 

    (function($) { 
     //The slide in out function. 
     $.fn.slider = function() { 
     var elements1 = this; 
      l = elements1.length; 
      i = 0; 

      function execute1() { 
       var current1 = $(elements1[i]); 
       i = (i + 1) % l; 
       current1 
        .fadeIn(100) 
        .animate({'marginLeft' : '-=240px'},500) 
        .delay(8000) 
        .animate({'marginLeft' : '+=240px'},500) 
        .fadeOut(100,execute1); 
      } 
      execute1(); 
      //Run the function. 
     return this; 
      //Making this available again to the outer function 
     }; 
    })(jQuery); 
    $(".slogans").slider(); 
}); 
</script> 

Answer 1

それらをマージしながら、私はあなたの問題だと思うあなたはグローバル変数として変数iとlが定義されていること、です。 faderとslider関数は、同じグローバル変数で機能します。

私はあなたが両方の機能でそれを変更する必要があり、三つの異なる解決策を持っている：

1. それらlocal作るためにvarを追加します。
   はvar i = 0;でvar l = elements.length;と
   i = 0;でl = elements.length;を交換してください。それらlocal作る

2. 使用,：
   はmですべてlを交換し、すべて：
   は、行の終わりvar elements1 = this;で,と
   l = elemnts1.length;

3. differnt varibale名を使用に対する;を交換してくださいとjはsliderの関数のみです。