平滑地改变jQuery动画

关于我昨晚问的问题，只有一个答案，我有一个关于jQuery动画的问题。如果我想在某个时候退出一个动画，由任意事件决定，并以不同的速度开始另一个动画，是否有任何方法可以使这种变化不明显？平滑地改变jQuery动画

换句话说，如果动画在4000ms开始，那么用户移动鼠标并停止第一个动画，并且第二个动画开始，这个在2000ms，是否有办法避免在第二个动画之前出现可怕的暂停动画开始？

我在元素上使用.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'); 


    }); 



});

来源

2011-03-04 Tom

你可以发布代码来看看你正在描述这个生涩的举动吗 – amosrivera 2011-03-04 20:03:05

发表。：）提前致谢！：D – Tom 2011-03-04 20:27:21

我发现履行任何形式的jQuery动画是利用回调函数，并等待动画本身是在平稳的方式。例如，如果你想要一个元素向上滑动，然后淡出，而不是链接的功能结合在一起，如：

.slideUp().fadeOut();

我发现，这样做

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

产生一个平滑的动画。

对于您的问题的更直接的答案，使用stop（）不会产生最平滑的动画“停止”，因为它实际上将其切断（沿着动画链的任何位置）。您可以使用.delay()在动画链之间产生短暂停顿。

来源

2011-03-04 20:05:56 dmackerman

感谢兄弟，但事情是我希望用户能够通过悬停来控制速度。想象一条线，用户悬停的线越远，动画就越快。即使我沿着线路选择了几个点，并在这些点上加倍了速度。现在，我可以轻松地改变动画速度，但停止一个动画功能并同时启动另一个动画功能，这在臀大肌中证明是一种痛苦。 – Tom 2011-03-04 20:21:27

平滑地改变jQuery动画

回答

相关问题