clear interval on hover

Question

have a custom made slider which I would like to stop on hover. I've tried to clear and set the interval on hover but doesn't work properly. It stops only the first time I hover on it then if I move the mouse out and in again it doesn't stop.

here's my code:

    var itvl = null;

    itvl = window.setInterval(function(){scroll_()},3000);

    function scroll_() {
        if ($('#carousel_ul li').length > 1) {
            $("#right_scroll").click();
        }
    }

    $('#carousel_ul li').hover(function() {
        window.clearInterval(itvl);    
    }, function() {
        window.setInterval(function(){scroll_()},3000);
    });

Any idea what am I doing wrong?

Thanks in advance

Mauro

score 2 · Accepted Answer · answered Dec 12 '11 at 10:53

2

When you are setting the interval on the hover-off, you are not setting itvl. itvl is actually an integer that acts as a reference to the interval. So the reference changes when you do window.setInterval(function(){scroll_()},3000); without reffing it to anything.

Try this instead:

$('#carousel_ul li').hover(function() {
    window.clearInterval(itvl);    
}, function() {
    itvl = window.setInterval(function(){scroll_()},3000);
});

answered Dec 12 '11 at 10:53

Vigrond

8,148
4
28
46

Great! Glad I could help. Remember to mark as answered if it resolved your issue. (I think you have to wait 15 mins after you ask) – Vigrond Dec 12 '11 at 11:01

score 1 · Answer 2 · answered Dec 12 '11 at 10:51

1

$('#carousel_ul li').hover(function() {
    window.clearInterval(itvl);    
}, function() {
    itvl = window.setInterval(function(){scroll_()},3000);
});

answered Dec 12 '11 at 10:51

Yuriy Rozhovetskiy

22,270
4
37
68

score 0 · Answer 3 · answered Dec 12 '11 at 10:55

You can use a boolean variable rather than clearInterval:

    var scrolling= true;    
    window.setInterval(scroll_,3000);    
    function scroll_() {
        if(scrolling) {
            if ($('#carousel_ul li').length > 1) {
               $("#right_scroll").click();
            }
        }
    }    
    $('#carousel_ul li').hover(function() {
        scrolling = false;    
    }, function() {
        scrolling = true;
    });

clear interval on hover

3 Answers3