Question

I have a text options div that’s hidden off screen, the user must click or tab to and press enter on the text “tab” in order to show the text options div.

How can I make the div slide back off screen after the user has stopped interacting with it (I guess on mouseOut?) or when a poweruser has tabbed away from it?

Test page

Answer 1

Take a look at jQuery’s animate function. There are also a bunch of wrappers, but it sounds as though the animation you are after is a bit more specialised than the stock ones.

To make the animation occur when an event happens, check out bind. There are also some convenience functions for this, but if you want to bind to multiple events at once (e.g. mouseleave and blur) then I would advise something along the lines of the following:

$(selectorForTheDivInQuestion).bind('mouseleave blur', function(){
    $(this).animate(properies, duration);
});

the properties could be something along the lines of {left-margin:-100px;} or {left:-100px;} if the div is relatively, absolutely or fixedly positioned.