流畅地改变 jQuery 动画

Question

关于我昨晚问的一个问题，只有一个答案，我有一个关于 jQuery 动画的问题。如果我想在某个时间点退出一个由任意事件决定的动画，然后以不同的速度开始另一个动画，有什么方法可以让这种变化不明显吗？

换句话说，如果动画在 4000 毫秒开始，那么用户移动鼠标，第一个动画退出，第二个开始，这个在 2000 毫秒，有什么办法可以避免在第二个动画之前出现那种生涩可怕的停顿开始了吗？

我在元素上使用 .stop(true) 在开始第二个动画之前停止当前正在运行的任何动画，但这没有帮助，并且 .clearQueue() 仅在事件完成时触发。

根据要求，代码如下：

$(document).ready(function(){

    $('#innerMainbottom').hover(function(){

        $('#innerMainbottom').mousemove(function(e){

            var mouseX = e.pageX-$(this).offset().left,

                width = $(this).innerWidth(),           // the width is 1000, but the container to move is 1600, hidden by overflow:hidden

                speed = (width-mouseX)*10,

                sliderCont = $('#sliderCont');          // this is the container I want to move



        if(mouseX>=510&&mouseX<=960){                       // do this if the user hovers to the right half of the container


            moverRight(mouseX,width,speed,sliderCont);
        }



        else if(mouseX>=0&&mouseX<=460){                        // do this if the user hovers to the left half of the container


            moverLeft(mouseX,width,speed,sliderCont);
        }



        else if(mouseX>460&&mouseX<510){                // stop altogether if the user hovers in the centre of the container, emulating a pausing effect



            $('#sliderCont').stop(true);


        }


        });



    function moverRight(mX,w,s,sC){


        $(sC).stop(true).animate({'left':-1600+'px'},s);


    }



    function moverLeft(mX,w,s,sC){


        $(sC).stop(true).animate({'left':0+'px'},s);


    }


    },function(){


        $('#sliderCont').stop(true).animate({'left':0+'px'},'normal');


    });



});

Answer 1

我发现执行任何类型的 jQuery 动画最流畅的方法是使用回调函数，并等到动画本身结束。例如，如果你想向上滑动一个元素，然后淡出，而不是像这样将函数链接在一起：

.slideUp().fadeOut();

我发现这样做

$("#anything").slideUp(1000, function() {
   $(this).fadeOut(1000);
})

产生更流畅的动画。

要更直接地回答您的问题，使用 stop() 不会产生最流畅的动画“停止”，因为它实际上会切断它（沿着动画链的任何地方）。您可以使用.delay() 在动画链之间产生短暂的停止。