CODEWITHSUNDEEP
javascriptjquery
Yunus Aslam
Yunus Aslam

Reputation: 2466

Unbind and Bind click events

I have an image gallery which has previous and next buttons. So inorder to make the images change I have written a function which keeps on clicking the next button to change the image.

function infiniteLoop(time){
    function f(){
        $('.image-nav-next').click() // click the next button
        timer = setTimeout(f, time)
    }
    f();
}

This works fine for me. But now I want to pause the click event on image hover. Meaning, when the user hovers on the image in the gallery then it should show the same image as long as the mouse is over that image. When the user removes the cursor from the image then the gallery again starts working and changing the image as before. I tried the following-

$('.myimg').mouseover(function(){         
    $('.image-nav-next').unbind('click');
});

and then 

$('.myimg').mouseout(function(){          
    $('.image-nav-next').bind('click');
});

Unbind works fine but then the re bind does not work. Any Idea?

Upvotes: 0

Views: 93

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

You are going the wrong way about it.

Instead what you need to do is to clear the timer on mouse enter clearTimeout(timer), and on mouse leave you can again schedule the looping by calling infiniteLoop

Upvotes: 1

Related Questions