jQueryバナーキャンセルボタンの上にマウスを置くと、機能が無効になります

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()メソッドを呼び出すために必要な現在のアニメーションをすべてすぐに停止するには、少し奇妙に見えます。 2つの引数を渡す必要があります。どちらもtrueに設定され、（clearQueue & & jumpToEnd）を示します。

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

また、コードを再検討する必要があります。 DOM refのキャッシュは、例えばここでは非常に重要です。

Ref .: .stop()