jQueryユーザーインタラクションのラベルを非表示にする

Question

ユーザーがテキストボックスとやりとりしたときにラベルを隠して表示する次のjQueryコードがあります。いくつかのシナリオは：

は

1）ユーザーの焦点は、ラベルが
2）ユーザータイプは、ラベルは0％不透明であるべき50％の不透明度であるべき
3）ユーザーは、すべてのコンテンツが削除されますが、ラベルがすべき重点を置いたまま 50％の不透明度であること
4）ユーザーは、すべてのコンテンツとフォーカスを削除 、ラベルが
5）は、ユーザーのタイプのコンテンツとフォーカスは、ラベルは、一言で言えば

だから、0％の不透明度である必要があり、0％不透明であるべき入力に値があり、ラベルがない場合は、フォーカスされている場合は50％、値がない場合は100％の不透明度で表示されます。次のように

コードは次のとおりです。

  $('label.placeholder').each(function() { 

       var label = $(this); 

       var input = label.next('input'); 

       label.click(function() 
       { 
        input.focus(); 
       }); 

       input.bind('keyup keydown focus click check change paste copy', function() 
       { 
        if (input.val().length > 0) 
        { 
         label.animate({ opacity: 0 }, 200); 
        } 
        else 
        { 
         label.animate({ opacity: .6 }, 200); 
        } 

       }).bind('blur', function() 
       { 
        label.animate({ opacity: 1 }, 200); 

       }); 

問題はしかし、ユーザーに高速でタイプかは、複数のアクションを実行した場合、それが持っているとして、それはしばらく時間がかかるために戻ってフェードインまたはフェードアウトを引き起こすことができるということです各対話コールバックの各シナリオのすべてのチェックを行ってください。良い例は、テキストの読み込みを入力してからもう一度削除すると、ラベルを再表示するまでに時間がかかることがわかります。

これを防止する方法についてのご意見はありますか？ http://jsfiddle.net/fFGM7/

Answer 1

すべてのアニメーションの前に.stop()を使用してください。