rotation de la liste avec problème mouseover

Question

J'ai un élément de liste qui tourne toutes les 3 secondes ce qui est bien, mon problème est en fait l'introduction de deux événements, un mouseover et mouseleave. Donc, fondamentalement, quand la mosue survole la liste, la liste s'arrête de bouger et quand la souris part, elle continue .. Voici ma tentative. Il ne fonctionne pas comme prévu, en fait il traîne lorsque la souris est sur la liste, l'aide de pls.

function test() { 
    var pre = $("ul li:first-child"); 
    (pre).each(function(i) { 
     $(this).slideUp(function(){ 
     $(this).appendTo(this.parentNode).slideDown(); 
    }); 
    }); 
} 
window.setInterval(test, 3000); 

$("ul").mouseover(function(){ 
    $("ul li").stop(); 
}); 

Answer 1

var test = function(){ 
    if(keepGoing){ 
     var pre = $("ul li:first-child"); 
     pre.each(function(i){ 
      $(this).slideUp(function(){ 
       $(this).appendTo(this.parentNode).slideDown(); 
      }); 
     }); 
    } 
} 

var keepGoing = true; 

window.setInterval(test, 3000); 

$("ul").hover(function(){ 
    keepGoing = false; 
}, function(){ 
    keepGoing = true; 
}); 

Answer 2

window.setInterval retourne un ID

var intervalId = window.setInterval(test, 3000);

Qu'est-ce que vous voulez faire, est alors clair que l'intervalle lorsque vous survolez

clearInterval(intervalId); 

aussi - utiliser

$('ul').hover(function() {/*on hover*/}, function() {/*on leave*/});

de sorte que vous pouvez reprendre l'intervalle après que vous avez fini de planer.