アニメーション中に要素をクリック解除できないようにする

Question

アニメーション化されたときに要素をクリックできないようにしようとしています。アニメーションが終了すると、再びクリック可能になります。私はこれを達成する方法について長い間助けを求めてきましたが、それを働かせることはできず、理由もわかりません。

HTML：文字Aをクリックすると

<p> 
    <span class="red" id="a">A</span><span id="llright" class="hide">llright</span> B C D 
</p> 

、それが左に移動し、その後、いくつかのテキストはその横にフェードイン。

の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'); 
    }); 

}); 


})(); 

アニメーションは素晴らしい作品が、これにはない：

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

最後の部分は、私は、単純なアラートを（挿入した場合であっても、まったく動作しません。 ）unbind（）の代わりに、Aが動いているかどうかを把握していないようです。

私は実際にここでいくつかの助けを使うことができました。私は考えることができるすべてを試しました。

Thxを /オスカーは

Answer 1

あなたのチェックは、ページのロード時に実行されています。クリック機能内のチェックを行います：

$('#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. 
     }); 
    } 
}); 

また、live（）は推奨されていません。 on（）に移動することを検討してください。

Answer 2

さまざまな状況に合わせて内部分岐を持つクリックハンドラを1つだけ取り付ける方が経済的です。前方アニメーション、逆方向アニメーション、およびアニメーションの進行中に拒絶する。

代わりにllrightの状態をテストすることで、addClass/removeClass（ 'open'）を使わずに退席することもできます。このような

何かがそれを行う必要があります。

$('#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); 
     }); 
    } 
}); 

注意をまた、このコードで.live()を使用する必要がないこと。