jQuery: Diaporama pause sur vol stationnaire

Question

j'ai donc ce code:

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

qui fonctionne à 100% bien .. où dois-je ajouter la fonction .hover() pour le diaporama pour faire une pause sur le vol stationnaire ??

Answer 1

Les méthodes setInterval() renvoient un intervalleID que vous pouvez utiliser pour effacer l'intervalle/le délai actuel en utilisant clearInterval().

Vous pouvez faire quelque chose comme ceci:

$(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