>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
