如何在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，但它看起來對你正在嘗試做的更好的解決方案。

您可以創建動畫，隨時播放並暫停播放。

我重寫了你的代碼。只要記住下面的一個前加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：我還沒有測試它的瀏覽器，但它給你的代碼應該是什麼樣子的想法。