jQueryアニメーションコールバック関数でどのようにロジックを作成しますか？

Question

私はjQueryで非同期アプリケーションを構築しようとしています。私は最近、setIntervalが関数への定数呼び出しをどのように行い、他の関数のロジックがその準備ができていない場合でもアクティビティを保護するという概念のいくつかを学びました。私が示しているコードは、私がやりたいことの草案です。作業コピーではありません。私の問題は、アニメーションの一部を無期限に一時停止し、残りの部分を（準備ができたら）再開するロジックを作成するように見えないことです。アニメーションコールバック関数でどのようにロジックを作成するのですか？それを理解しようとしているもののおかげ

var runAnimation; 
var timePassed; 
var someThing; 

$(document).ready(function(){ 
    asyncFunction(); 

}); 

function asyncFunction() { 
    if (someCondition == true) { 
     animationFunction(){ 

     } 
    } 
    runAnimation = setInterval(animationConditions, 100) 
} 

function animationConditions(){ 
    if (timePassed = 30) { 
     if( someThing == true) { 
      animationFunction() { 
     } 
    } 
    timePassed += 1; 
} 

function animationFunction() { 
    $('#show div') 
    .animate({left: 500},1500) 
    .delay(3000) 
    .queue(function(){ 
     someThing = false; 
     //but in this section I would like something like a mouseover or 
     //other things to be able to pause the animation. I was experimenting 
     //with queue and dequeue but any time I use dequeue in this section 
     //it turns of the queue, even if the statement fails. For exmaple if it 
     //is in an else and the if is true. I would like to be able to add more 
     //pause on an event like a mouseover. When mouse leaves resume the animation. 

     //if(something == true){ 
     // pause aniamtion indefinitely; 
     //} 


    }).dequeue().animate({left: 1100},1500);  


} 

は私があれば（）内のコードが実行されない理由を私は理解していないこの

function animatePause(query, duration, distance){ 

     checkAp = setInterval(function(){ 
     if(marqueeVars.autoPlay == false) { 
      console.log("that's one"); 
      query.delay(70000000000000000).animate({left: distance},function(){ 
       clearInterval(checkAp); 
       console.log("long wait!"); 
      }); 
     } else { 
      console.log("that's two"); 
      //console.log(query.html()); 
      //clearInterval(checkAp); 
      query.delay(duration).animate({left: distance},function(){ 
       clearInterval(checkAp); 
       console.log("regular wait!"); 
       animateOut(query,1100); 
      });   
     } 
    }, 100); 
} 

を思い付きましたか？インターバルをクリアすることは決してありません。アニメーションを実行することはありませんか？それは単に無視されるようです。私はこのコンセプトを、私がプラグインを見るつもりであると思っていると理解しなければならないと思う。ありがとう

Answer 1

Greensock Timeline maxが必要になります。それを使用して、一時停止、続行、逆転、スピードアップなどを行うことができます。

sample code

Answer 2

あなたはTweenMaxとTimelineMaxを認識しているかどうかは知りませんが、それはあなたがやろうとしているもののためのよりよい解決策として見えます。

アニメーションを作成して再生し、いつでも一時停止することができます。

コードを書き換えました。ただ、次の1の前にTweenMaxとTimelineMaxスクリプトを追加することを忘れないでください：

// Setup 
var element = '#show div', 
    duration = 1.5; 

// This is your timeline, you can add as many animation as you want 
var animation = new TimelineMax(); 
    animation.add(TweenMax.to(element, duration, { left: 500 })); 
    animation.add(TweenMax.to(element, duration, { left: 1100, delay: 3 })); 
    animation.repeat(-1); // repeat indefinitely 
    animation.repeatDelay(3); // add a delay of 3s before every repetition 


// This binds your mouseenter and mouseleave to the animation 
$('#show div').hover(
    function() { 
     animation.pause(); 
    }, function() { 
     animation.resume(); 
    }); 

// You can add some other conditions 
if (someCondition) { 
    animation.pause() 
} 
else { 
    animation.resume() // you can restart using animation.play() if you prefer 
} 

// And finally add it to your document 
$(document).ready(function(){ 
    animation.play(); 
}); 

PS：私は、ブラウザ上でそれをテストしていないが、それはあなたのコードがどのように見えるかのアイデアを提供します。