Question

I have the following jQuery code that hides and shows a label when user interacts with text box. Some scenarios:

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

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.

The code is as follows:

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

                });

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.

Any ideas on how to prevent this? http://jsfiddle.net/fFGM7/

Answer 1

Use .stop() before all your animations. I believe that will fix it:

$(label).stop().animate({ opacity: 1 }, 200);