Mousehold падзея ў Jquery

У прынцыпе, у мяне ёсць гэты малюнак з дапамогай кнопкі са стрэлкай налева і направа. Гэта выява, па змаўчанні з'яўляецца першым кадрам я здабываецца з некаторага GIF, арыгінальны GIF змяшчае 31 кадраў. Мая мэта складаецца ў тым, калі карыстальнікі націскаюць кнопку са стрэлкай направа, я хачу, каб адлюстраваць наступны кадр і гэтак далей ... Усё працуе выдатна, як паказана ніжэй коды. Тым не менш, мне трэба дадаць некаторыя mousehold падзея, так што, калі карыстальнік націскае і ўтрымлівайце націснутай клавішу мышы, я хачу, каб страляць наступныя выявы. Як я магу дамагчыся гэтага?

$('#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('');
    }
});
5
Як наконт «taphold» падзеі?
дададзена аўтар Roshdy, крыніца

6 адказы

Ну вы можаце выкарыстоўваць MouseDown падзея для запуску функцыі, якая адлюстроўвае GIF-кадр: http://api.jquery.com/mousedown/ , а затым дадаць яшчэ адзін апрацоўшчык падзей для MouseUp падзея, якая спыніць гэтую функцыю. Гэтая функцыя можа быць выклікана з дапамогай setInterval() у MouseDown -Event, напрыклад, і спыняюць з дапамогай clearInterval() у MouseUp падзея.

Гэта прыклад, які паказвае прынцып:

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);
});
16
дададзена
Ці можаце вы паказаць мне прыклад таго, як MouseDown і setInterval могуць працаваць разам.
дададзена аўтар user2310422, крыніца
Я павінен працаваць дзякуй!
дададзена аўтар user2310422, крыніца

Ну вы можаце выкарыстоўваць MouseDown падзея для запуску функцыі, якая адлюстроўвае GIF-кадр: http://api.jquery.com/mousedown/ , а затым дадаць яшчэ адзін апрацоўшчык падзей для MouseUp падзея, якая спыніць гэтую функцыю. Гэтая функцыя можа быць выклікана з дапамогай setInterval() у MouseDown -Event, напрыклад, і спыняюць з дапамогай clearInterval() у MouseUp падзея.

Гэта прыклад, які паказвае прынцып:

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);
});
16
дададзена
Ці можаце вы паказаць мне прыклад таго, як MouseDown і setInterval могуць працаваць разам.
дададзена аўтар user2310422, крыніца
Я павінен працаваць дзякуй!
дададзена аўтар user2310422, крыніца

Ну вы можаце выкарыстоўваць MouseDown падзея для запуску функцыі, якая адлюстроўвае GIF-кадр: http://api.jquery.com/mousedown/ , а затым дадаць яшчэ адзін апрацоўшчык падзей для MouseUp падзея, якая спыніць гэтую функцыю. Гэтая функцыя можа быць выклікана з дапамогай setInterval() у MouseDown -Event, напрыклад, і спыняюць з дапамогай clearInterval() у MouseUp падзея.

Гэта прыклад, які паказвае прынцып:

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);
});
16
дададзена
Ці можаце вы паказаць мне прыклад таго, як MouseDown і setInterval могуць працаваць разам.
дададзена аўтар user2310422, крыніца
Я павінен працаваць дзякуй!
дададзена аўтар user2310422, крыніца

Акрамя гэтага адказу Zim84, я павінен дадаць гэты кавалак кода!

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

Гэта будзе клапаціцца, што калі хто-то націскае на кнопку ( MouseDown ) і ўтрымлівае яе мышшу ўніз і лісце ( MouseOut ) кнопка, інтэрвал таксама чысціцца. Без гэтага інтэрвалу не спыняецца ў гэтай сітуацыі асабліва.

4
дададзена

Акрамя гэтага адказу Zim84, я павінен дадаць гэты кавалак кода!

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

Гэта будзе клапаціцца, што калі хто-то націскае на кнопку ( MouseDown ) і ўтрымлівае яе мышшу ўніз і лісце ( MouseOut ) кнопка, інтэрвал таксама чысціцца. Без гэтага інтэрвалу не спыняецца ў гэтай сітуацыі асабліва.

4
дададзена

Акрамя гэтага адказу Zim84, я павінен дадаць гэты кавалак кода!

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

Гэта будзе клапаціцца, што калі хто-то націскае на кнопку ( MouseDown ) і ўтрымлівае яе мышшу ўніз і лісце ( MouseOut ) кнопка, інтэрвал таксама чысціцца. Без гэтага інтэрвалу не спыняецца ў гэтай сітуацыі асабліва.

4
дададзена