如何在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：我还没有测试它的浏览器，但它给你的代码应该是什么样子的想法。