Функция отмены баннера jQuery при наведении мыши на кнопку - PullRequest
Новая
       6

Функция отмены баннера jQuery при наведении мыши на кнопку

0 голосов
/ 21 января 2011

У меня есть баннер с 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)
, однако это ожидает завершения анимации, прежде чем очистить.Чего я хочу, так это чтобы можно было немедленно остановить анимацию и затемнить соответствующее изображение.

Есть идеи?

1 Ответ

0 голосов
/ 21 января 2011

Ваши методы выглядят немного странно, в любом случае, чтобы немедленно остановить все текущие анимации, вам нужно вызвать метод .stop() для анимированного элемента.Вы должны передать два аргумента, оба из которых установлены на true, которые указывают (clearQueue && jumpToEnd); 

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

Опять же, вам следует пересмотреть свой код.Например, кеширование DOM-ссылок - довольно важная вещь.

Ref .: .stop ()

...