如何在執行新的動畫之前停止Jquery中的所有動畫？

我只是試驗一些JQuery。如何在執行新的動畫之前停止Jquery中的所有動畫？

我有淡入另一個形象mouseOver()出現和消失回到mouseOut()

它的偉大工程，但如果你一次又一次地移動鼠標在鏈接上，比如5倍，圖像變淡的圖像一次又一次地進出，而你只是坐在那裏等待它來克服這種瘋狂的行爲。

爲了阻止這種行爲，我試圖使用一個標誌，並開始動畫只有它不是已經動畫，但猜猜是什麼？如果說，我有4個這樣的按鈕，並且在每個按鈕的鼠標懸停上，我正在褪色。在另一幅圖像中，由於該標記爲假，該動畫將被忽略。

so有沒有辦法在執行新動畫之前停止所有以前的動畫？我說的是正常fadeIn()和slideDown()功能的JQuery

編輯：從鏈接添加代碼。

<a href="javascript:void(0);" onMouseOver="mouseOverOut(false);" onMouseOut="mouseOverOut(true);">Tick</a>

的JavaScript

function mouseOverOut(t) 
{ 
    if(t) 
    { 
     $('.img1').fadeIn(); 
     $('.img2').fadeOut(); 
    } 
    else 
    { 
     $('.img1').fadeOut(); 
     $('.img2').fadeIn(); 
    } 
}

來源

2010-11-04 LocustHorde

@patrick grrrrrrr你暴露了我幼稚的功能命名習慣！ – LocustHorde 2010-11-04 12:14:47

使用.stop()與fadeIn/Out可能導致陷入局部狀態的不透明度。

一種解決方案是使用.fadeTo()來代替，它給出了不透明度的絕對目的地。

function mouseOverOut(t) { 
    if(t) { 
     $('.img1').stop().fadeTo(400, 1); 
     $('.img2').stop().fadeTo(400, 0); 
    } 
    else { 
     $('.img1').stop().fadeTo(400, 0); 
     $('.img2').stop().fadeTo(400, 1); 
    } 
}

這是寫它的一種較簡單的方法。

function mouseOverOut(t) { 
    $('.img1').stop().fadeTo(400, t ? 1 : 0); 
    $('.img2').stop().fadeTo(400, t ? 0 : 1); 
}

或者這可能工作。不過，請先測試一下。

function mouseOverOut(t) { 
    $('.img1').stop().fadeTo(400, t); 
    $('.img2').stop().fadeTo(400, !t); 
}

編輯：這最後一個似乎工作。真/假被轉換爲1/0。您也可以直接使用.animate()。

function mouseOverOut(t) { 
    $('.img1').stop().animate({opacity: t}); 
    $('.img2').stop().animate({opacity: !t}); 
}

來源

2010-11-04 12:18:19 user113716

使用stop（）的goToEnd參數應該能夠避免這種情況。 – 2010-11-04 12:21:31

@ Dr.Molle - 是的，這是一個選項，但效果在我看來更加震撼。 – user113716 2010-11-04 12:23:54

當然，它應該看起來好多了，如果動畫可以像你建議的那樣順利結束:) – 2010-11-04 13:11:00

你已經嘗試stop()？

描述：停止匹配元素上當前運行的動畫。

來源

2010-11-04 11:59:11

不，我沒試過，是獨立功能嗎？我應該把它叫做''stop（）''嗎？將立即嘗試此操作並回報，謝謝 – LocustHorde 2010-11-04 12:15:26

使用.stop()

來源

2010-11-04 11:59:19

如何在執行新的動畫之前停止Jquery中的所有動畫？

回答

相關問題