CODEWITHSUNDEEP
javascriptjquery
user1937021
user1937021

Reputation: 10781

disable click during animation

I would like to disable the click on an element during animation and when animation has ended, enable it again. here is the code:

$(document).on('click touchstart', '.slot1-up', function(e){
                e.preventDefault();

                firstSlotPos = parseInt($(".jSlots-wrapper:nth-child(1) .slot").css('top'));
                console.log(firstSlotPos)
                if (firstSlotPos < -309) {
                    $(".jSlots-wrapper:nth-child(1) .slot").stop(true,true).animate( { 'top' : firstSlotPos  + 310 + "px" },600, 'easeInOutSine', function() {

                    });
                }

        });

Upvotes: 0

Views: 219

Answers (2)

A. Wolff
A. Wolff

Reputation: 74420

Just check it using pseudo selector :animated:

$(document).on('click touchstart', '.slot1-up', function (e) {
    e.preventDefault();
    // if animated, return {undefined}
    if($(".jSlots-wrapper:nth-child(1) .slot").is(':animated')) return;       
    firstSlotPos = parseInt($(".jSlots-wrapper:nth-child(1) .slot").css('top'));
    if (firstSlotPos < -309) {
        $(".jSlots-wrapper:nth-child(1) .slot").stop(true, true).animate({
            'top': firstSlotPos + 310 + "px"
        }, 600, 'easeInOutSine', function () {

        });
    }
});

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337560

You could mess around with dynamically adding/removing event hooks using off/on, but this can get messy.

My preferred method is to store a data attribute on the element which shows it's state. From this you can determine whether or not to allow the handler function to execute. Something like this:

$(document).on('click touchstart', '.slot1-up', function(e){
    e.preventDefault();
    var $el = $(this);
    if (!$el.data('animating')) {
        var $slot = $(".jSlots-wrapper:nth-child(1) .slot");
        $el.data('animating', true);
        firstSlotPos = parseInt($slot.css('top'));
        if (firstSlotPos < -309) {
            $slot.stop(true,true).animate({ 'top' : (firstSlotPos + 310) + "px" }, 600, 'easeInOutSine', function() {
                $el.data('animating', false);
            });
        }
    }
});

Upvotes: 3

Related Questions