rotating list with mouseover problem

I have a list item which rotates every 3 seconds which is fine, my problem is actually introducing two events to it, a mouseover and mouseleave. So basically when the mosue hovers over the list, the list stops moving and when the mouse leaves it continues.. Here is my attempt. It does not work as intended, infact it lags when the mouse is on the list, pls help.

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();
});

window.setInterval will return an ID

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

What you want to do, is to then CLEAR that interval when you hover

clearInterval(intervalId);

Also - use

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

so that you can resume the interval after you're done hovering.

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;
});