JQuery: пауза слайд-шоу по наведению

Question

Так у меня есть этот код:

$(document).ready(function(){ 
    $("#slideshow > div:gt(0)").hide(); 
    setInterval(function() { 
    $("#slideshow > div:first") 
      .fadeOut(1000) 
      .next() 
      .fadeIn(1000) 
      .end() 
      .appendTo("#slideshow"); 
}, 3000); 
}); 

, который работает 100% штраф .. где я могу добавить функцию .hover() для слайд-шоу, чтобы сделать паузу при наведении курсора мыши ??

Answer 1

Методы setInterval() возвращает интервал ID, который можно использовать для очистки текущего интервала/таймаута с использованием clearInterval().

Вы можете сделать что-то вроде этого:

$(document).ready(function() { 

    var timer; 

    $("#slideshow > div:gt(0)").hide(); 

    $("#slideshow") 
     // when mouse enters, clear the timer if it has been set 
     .mouseenter(function() { 
      if (timer) { clearInterval(timer) } 
     }) 
     // when mouse goes out, start the slideshow 
     .mouseleave(function() { 
      timer = setInterval(function() { 
       $("#slideshow > div:first") 
        .fadeOut(1000) 
        .next() 
        .fadeIn(1000) 
        .end() 
        .appendTo("#slideshow"); 
      }, 3000); 
     }) 
     // trigger mouseleave for initial slideshow starting 
     .mouseleave(); 

});​ 

DEMO