2016-11-08 3 views
0

jqueryの画像アニメーションに.setInterval().animate()を使用しています。私のコードは次のように:今setInterval関数でanimate()とresume()を自動停止できますか?

$(document).ready(function(){ 
    setInterval(function(){   
    $("#animate1").fadeIn('slow').animate({'margin-left':'220px','margin-bottom':'20px'},2000,function(){ 
    $('.1st').animate({'opacity':'0'},1000,function(){$('.1st').animate({'opacity':'1'}) }) 
    }).fadeOut(); 
    $("#animate1").fadeIn('slow').animate({'margin-bottom':'0px','margin-left':'-140px'},2000).fadeOut('slow'); 
    },2000); 
    }); 

が、私は$("#animate2")でアニメーションを与えたいと思うが、それは私が$("#aniamte1")が停止または一時停止されることを望ん開始する前に。だから、キャッチは$("#animate1")の後です。私はそれを停止/一時停止してから$("#animate2")を実行してからもう一度やり直してください。$("#animate2")私は一時停止/停止して実行したい$("#animate1")。どうしたらいいの?

答えて

1

アニメーションが終了したら変数を設定できます。 jQueryのドキュメントから取られた例として(あなたのコードの次の時間をフォーマットしてください、それが読みにくいです):そのような

$(document).ready(function(){ 
    var runAnimate1 = true; 
    var runAnimate2 = false; 
    setInterval(function(){ 
     if(runAnimate1) { 
     $("#animate1").animate({ 
      width: [ "toggle", "swing" ], 
      height: [ "toggle", "swing" ], 
      opacity: "toggle" 
     }, 5000, "linear", function() { 
      runAnimate1 = false; 
      runAnimate2 = true; 
     }); 
     } 

     if(runAnimate2) { 
     $("#animate2").animate({ 
     width: [ "toggle", "swing" ], 
     height: [ "toggle", "swing" ], 
     opacity: "toggle" 
     }, 5000, "linear", function() { 
      runAnimate1 = true; 
      runAnimate2 = false; 
     }); 
    } 
    }); 
}); 

何かが動作するはずです。それを擬似コードと見なして、私はそれをテストしていませんが、あなたはその考えを得るべきです。あなたはあなたのアニメーションを採用するだけでいいです。

+0

ありがとうございます!あなたは追加する必要があります}}); – Maulik

+0

素晴らしい!私は不足している括弧を追加しました。 :) – fatel

関連する問題