jQuery hide and show label on user interaction
<p>I have the following jQuery code that hides and shows a label when user interacts with text box. Some scenarios:</p>

<p>1.) User focus, label should be at 50% opacity<br>
2.) User types, label should be at 0% opacity<br>
3.) User removes all content but remains focused, label should be at 50% opacity<br>
4.) User removes all content and focus, label should be at 0% opacity<br>
5.) User types content and focus, label should be at 0% opacity    </p>

<p>So in a nutshell if input has value then no label, if focused it's at 50% and if no value then at 100% opacity.</p>

<p>The code is as follows:</p>

<pre><code>            $('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 &gt; 0)
                    {
                        label.animate({ opacity: 0 }, 200);
                    }
                    else
                    {
                        label.animate({ opacity: .6 }, 200);
                    }

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

                });
</code></pre>

<p>The problem though is that if a user types in fast or does multiple actions then it can cause the fade back in or out to take a while as it has to go through all the checks for each scenario for each interaction callback. A good example is to type in a load of text and then delete it all again and you will see it take a while to reshow the label.</p>

<p>Any ideas on how to prevent this? <a href="http://jsfiddle.net/fFGM7/" rel="nofollow">http://jsfiddle.net/fFGM7/</a></p>
