Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts

    prevent click while animating?

    Hello, I have a jQuery function that executes when I click a certain element. It consists of a few fades and animations, which take a few seconds to play all the way through. How can I prevent the function from executing a second time, while those fades and animations are still going on? And whenever the fades and animations aren't going on, then I want to be able to click the element again. I guessing it's something to be placed before the .click, $('#test').?.click(function() {}); ??
    Last edited by resin; 08-16-2012 at 11:53 AM.

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    var running = false;
    $(function() {
        $('#test').click(function() {
            if (running == true) return;
            running = true;
            $('#test2').fadeIn(1000).delay(1000).fadeOut(1000, function () {
                running = false;
            });
        });
    
    });
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    if (running == true) return false;
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #4
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts
    What would you do for functions that call multiple selectors, which finish at different times? For example-

    Code:
    $('#test').click(function() {
    $('#test2').fadeIn(1000).delay(1000).fadeOut(1000);
    $('#test3').delay(500).fadeOut(300);
    $('#test4').animate({"top": "-150px"}, 15000);
    });
    How can I make it so nothing inside this function executes again, until all actions have fully completed?

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    @resin. You've deleted your recent posts. This makes it difficult for others to follow, and to understand what question my recent post was answering.

    It is best not to delete posts that have already been responded to.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •