當鼠標輸入一個按鈕時，jQuery Banner取消功能

Question

我有一張橫幅，裏面有3張圖片，我希望使用jQuery淡入和淡出。我有這部分工作正常與下面的代碼：

 
$j(document).ready(function() { 
     initBanner(); 
    startLoop = setInterval(initBanner,50000); 

    function initBanner(){ 
    $j("##image1").delay(10000).fadeOut(1500, function(){ 
    $j("##image2").fadeIn(1000, function(){ 
    $j("##image2").delay(10000).fadeOut(1500, function(){ 
     $j("##image3").fadeIn(1000, function(){ 
     $j("##image3").delay(10000).fadeOut(1500, function(){ 
     $j("##image1").fadeIn(1000); 
     //inMotion = false; 
     }); 
     }); 
    }); 
    }); 
    }); 
    } 

但是旗下有3個鏈接，其中有一個圖像與他們有關。當我將鼠標放在按鈕上時，我想將淡入淡出的圖像更改爲與按鈕相關的圖像。

我試過

clearInterval(startLoop)

但是，這等待動畫在清除之前完成。我想要的是能夠立即停止動畫並淡入相關圖像。

任何想法？

Answer 1

你的方法看起來有點奇怪，無論如何立即停止所有當前動畫，你需要調用.stop()方法到動畫元素。你應該傳入兩個參數，都設置爲true這表明（清除隊列& & jumpToEnd）;

function stopBanner() { 
    clearInterval(startLoop); 
    $('##image1, ##image2, ##image3').stop(true, true); 
} 

再一次，你應該重新考慮你的代碼。例如，緩存DOM引用是一件非常重要的事情。

Ref .: .stop()