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() для анимированного элемента. Вы должны передать два аргумента, оба установлены в true, которые указывают (clearQueue & & jumpToEnd);

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

Опять же, вы должны пересмотреть свой код. Кэширование DOM refs здесь, к примеру, довольно важно.

Ref .: .stop()