CODEWITHSUNDEEP
jqueryhtml-lists
seun87
seun87

Reputation: 1

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

Upvotes: 0

Views: 183

Answers (2)

DNR
DNR

Reputation: 986

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.

Upvotes: 1

mattsven
mattsven

Reputation: 23283

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

Upvotes: 0

Related Questions