Make an element invisible during animation

Question

I am trying to make an item not clickable when it is animated. When the animation is complete, I want it to be clicked again. I have been looking for some help on how to achieve this for a long time, but I can't get it to work, and I don't know why.

HTML:

<p> <span class="red" id="a">A</span><span id="llright" class="hide">llright</span> BCD </p> 

When you press the A button, it moves to the left, and then the text disappears next to it.

jQuery:

 (function() { var letterA = $('#a'), llright = $('#llright'); $('#a:not(.open)').live('click', function() { letterA.animate({ marginRight: "5.7in", }, 1300, function() { letterA.addClass('open'); llright.fadeIn(1300); // Animation complete. }); }); $('#a.open').live('click', function() { llright.fadeOut(700); letterA.delay(700).animate({ marginRight: "0.0in", }, 700, function() { letterA.removeClass('open'); }); }); })(); 

Animation works fine, but it doesn't:

 if(letterA.is(':animated')) { letterA.unbind('click'); }; 

The last part does not work at all, even when I insert a simple warning () instead of unbind (), it looks like not when A moves, not.

I could really use some help here, I tried everything I could come up with.

thanks / oscar

Answer 1

Your check is only performed when the page loads. Make a check inside the click function:

 $('#a:not(.open)').live('click', function() { if(!letterA.is(':animated')) { letterA.animate({ marginRight: "5.7in", }, 1300, function() { letterA.addClass('open'); llright.fadeIn(1300); // Animation complete. }); } }); 

In addition, live () is deprecated; consider switching to on ().

Answer 2

It is more economical to attach only one internal branching click handler to suit various circumstances; forward animation, reverse animation and rejection during animation.

You can also leave without addClass / removeClass ('open') by checking the llright state.

Something like this should do this:

 $('#a').on('click', function() { var $this = $(this), llright = $this.next("span"); if($this.is(":animated") || llright.is(":animated")) { return;//reject (no action) } if(llright.is(":visible")) { //reverse animation sequence llright.fadeOut(700, function(){ $this.animate({ marginRight: 0, }, 700); }); } else { $this.animate({ //forward animation sequence marginRight: "5.7in", }, 1300, function() { llright.fadeIn(1300); }); } }); 

Note also that with this code there is no need to use .live() .