平滑地改變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動畫

回答

相關問題