Mousehold Event In Jquery

Basically, I have this image with left and right arrow button. This image, by default is the first frame I have extracted from some gif, the original gif contains 31 frames. My goa

Solution 1:

Well you can use the mousedown event to start a function that displays the gif-frame: http://api.jquery.com/mousedown/ and then add another event handler for the mouseup event that will stop that function. That function can be called via setInterval() in the mousedown-event for example and get stopped via clearInterval() in the mouseup event.

This is an example that shows the principle:

var interval;
$(button).addEventListener('mousedown',function(e) {
    interval = setInterval(function() {
        // here goes your code that displays your image/replaces the one that is already there
    },500); // 500ms between each frame
});
$(button).addEventListener('mouseup',function(e) {
    clearInterval(interval);
});
// Thank you, Timo002, for your contribution!
// This code will stop the interval if you move your mouse away from the button while still holding it.
$(button).addEventListener('mouseout',function(e) {
    clearInterval(interval);
});

Solution 2:

In addition of the answer of Zim84, I should also add this piece of code!

$(button).addEventListener('mouseout',function(e) {
    clearInterval(interval);
});

This will take care that if someone pushes the button (mousedown) and holds its mouse down and leaves (mouseout) the button, the interval is also cleared. Without this the interval does not stop in this particularly situation.