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 goal is when the users clicks the right arrow button, I want to display the next frame and so on... Everything is working perfectly as shown below code. However, I need to add some mousehold event so that when the user click and hold the mouse, I want to keep firing the next images. How can I achieve this?

$('#arrow_right').click(function (event) {
    event.preventDefault();
    var data_id = parseInt($(this).parent().find('#inner_wrap img').attr('data-id'));

    if (data_id >= 1 && data_id <= 30) {
        data_id = data_id + 1;
        var avatar_num = $('#inner_wrap').html('<img id="avatar" data-id="' + data_id + '" src="img/avatar_test' + data_id + '.gif" width="90" height="200">');
    }
});

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 goal is when the users clicks the right arrow button, I want to display the next frame and so on... Everything is working perfectly as shown below code. However, I need to add some mousehold event so that when the user click and hold the mouse, I want to keep firing the next images. How can I achieve this?

$('#arrow_right').click(function (event) {
    event.preventDefault();
    var data_id = parseInt($(this).parent().find('#inner_wrap img').attr('data-id'));

    if (data_id >= 1 && data_id <= 30) {
        data_id = data_id + 1;
        var avatar_num = $('#inner_wrap').html('<img id="avatar" data-id="' + data_id + '" src="img/avatar_test' + data_id + '.gif" width="90" height="200">');
    }
});

• javascript
• jquery

• How about 'taphold' event? – Roshdy Commented May 3, 2015 at 18:09

2 Answers 2

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

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.