>When you focus on an input tag, the content of the div named 'help- >for-xxx' should appear in the #help-tip element. >And, accorgingly when you leave an input it should disappear. >Appearing and disappearing means here fadeIn and fadeOut. >Of course my solution is bad (fadeIn should wait fadeOut to complete). >I know I can attach a callback after event completion, but I don't >know how to build a solution from it. > >thanks > >Script follows: >$('.help').each(function() { > var that = $(this) > var id = this.id.replace(/help-for-/, '#') > $(id).focus(function(){ > $('#help-tip').html(that.html()).fadeIn() > }) > $(id).blur(function() { > $('#help-tip').fadeOut() > }) >})
Newer versions of jQuery (1.2+) introduced .stop() method which you can use to cancel all queued animations. You could call stop() before your fadeIn so the effect it more fluid. $('#help-tip').html(that.html()).stop().fadeIn() The problem with using a callback after the fadeOut is complete is that you can cause a real bad delayed queue for users who are tabbing quickly through the fields. -Dan