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);
}

我不明白为什么if（）里面的代码没有执行？它永远不会清除间隔，它从不运行动画？它似乎被忽略了。我想我应该理解这个概念，甚至以为我会看看这个插件。感谢

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：我还没有在浏览器上测试它，但是它让你知道代码应该是什么样的。

如何在jQuery动画回调函数中创建逻辑？

2 个答案: