Adagedgeplill
New Member
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:\[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 > 0) { label.animate({ opacity: 0 }, 200); } else { label.animate({ opacity: .6 }, 200); } }).bind('blur', function() { label.animate({ opacity: 1 }, 200); });\[/code\]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/
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:\[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 > 0) { label.animate({ opacity: 0 }, 200); } else { label.animate({ opacity: .6 }, 200); } }).bind('blur', function() { label.animate({ opacity: 1 }, 200); });\[/code\]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/