javascript - jquery disable click until animation is fully complete - Stack Overflow

admin管理员组

文章数量:1334918

i want to disable click function untill every code in it; initialized and pleted.

i read these articles and tried what they said but cant make it happen: event.preventDefault() vs. return false + Best way to remove an event handler in jQuery? + jQuery - Disable Click until all chained animations are plete

i prepared simple example for this question:

This is DEMO

html

<div class="ele">1</div>
<div class="ele">2</div>
<div class="ele">3</div>

​

jQuery

$('.ele').click(function() {

    if ( !$('.ele').is(':animated') ) {//this works too but;
                         //is:animate duration returns = 2000 but need to be 4000
        $('.ele').stop().animate({'top':'0px'},2000);
        $(this).stop().animate({'top':'100px'},4000);
    } 
    return false;
});
​

i want to disable click function untill every code in it; initialized and pleted.

i read these articles and tried what they said but cant make it happen: event.preventDefault() vs. return false + Best way to remove an event handler in jQuery? + jQuery - Disable Click until all chained animations are plete

i prepared simple example for this question:

This is DEMO

html

<div class="ele">1</div>
<div class="ele">2</div>
<div class="ele">3</div>

​

jQuery

$('.ele').click(function() {

    if ( !$('.ele').is(':animated') ) {//this works too but;
                         //is:animate duration returns = 2000 but need to be 4000
        $('.ele').stop().animate({'top':'0px'},2000);
        $(this).stop().animate({'top':'100px'},4000);
    } 
    return false;
});
​

• javascript
• jquery
• animation
• click
• bind

Share Improve this question Follow edited May 23, 2017 at 12:07 CommunityBot 111 silver badge asked Jul 1, 2012 at 15:40 Barlas ApaydinBarlas Apaydin 7,3151111 gold badges5858 silver badges8888 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Use on() and off() to turn the click function on/off :

$('.ele').on('click', animateEle);

function animateEle(e) {
    $('.ele').stop().animate({'top':'0px'},2000);
    $(e.target).off('click').stop().animate({'top':'100px'},4000, function() {
        $(e.target).on('click', animateEle);
    });
}​

DEMONSTRATION

You can try this:

var exec_a1 = true, exec_a2 = true;
$('.ele').click(function() {
    if (exec_a1 && exec_a2) {
        exec_a1 = false;
        exec_a2 = false;

        $('.ele').stop().animate({'top': '0px'}, 2000, function() {
            exec_a1 = true;
        });
        $(this).stop().animate({'top': '100px'}, 4000, function() {
            exec_a2 = true;
        });
    }
    return false;
});

本文标签： javascriptjquery disable click until animation is fully completeStack Overflow