Solution Timeline

All versions (edits) of solutions to Re-write jQuery script to animate an element based on mouse movement. appear below in the order they were created. Comments that appear under revisions were those created when that particular revision was current.

To see the revision history of a single solution (with diffs), click on the solution number (ie. "#1") in the upper right corner of a solution revision below.

← Bounty Expand all edits

The mousestop library might help.
https://github.com/richardscarrott/jquery-mousestop-event

Here's your code rewritten to use mousestop. Beware jsfiddle.net has problems with IE.
http://jsfiddle.net/zCh6s/4/

I edited your code and this works: https://gist.github.com/3915084 . However, it is really laggy because every single mouse movement triggers your function, so because the script needs to catch up, the delay ends up being more than 1000ms

I edited your code and this works: https://gist.github.com/3915084 . However, it is really laggy because every single mouse movement triggers your function, so because the script needs to catch up, the delay ends up being more than 1000ms.

I will continue to edit the gist to make the code more efficant...

I edited your code and this works: https://gist.github.com/3915084 . However, it is really laggy because every single mouse movement triggers your function, so because the script needs to catch up, the delay ends up being more than 1000ms.

I will continue to edit the gist to make the code more efficant...

EDIT: I switched to using setInterval to improve speed, now I just need to add the 1000ms delay before hiding.

You should just check the left of the element, and limit the animation queue than it will work as you expected.

here is a jsFiddle example.

http://jsfiddle.net/ocanal/ZUYtu/1/

You should just check the left of the element, and limit the animation queue than it will work as you expected.

here is a jsFiddle example.

http://jsfiddle.net/ocanal/ZUYtu/2/

I edited your code and this works: https://gist.github.com/3915084 . However, it is really laggy because every single mouse movement triggers your function, so because the script needs to catch up, the delay ends up being more than 1000ms.

I will continue to edit the gist to make the code more efficant...

EDIT: I switched to using setInterval() to improve performance, now I just need to add the 1000ms delay before hiding.

EDIT: It's working perfectly! :)

Just doing some changes to your codes I made it work fine. You can not call animate every mouse move.

I created an example here: http://jsfiddle.net/hwB2q/3/

You should just check the left of the element, and limit the animation queue than it will work as you expected.

here is a jsFiddle example.

http://jsfiddle.net/ocanal/ZUYtu/2/

Edit:

Another solution is clearQueue()

If you clear animation queue and stop the last animation before hiding it, that will work as you expected again.

http://jsfiddle.net/ocanal/ZUYtu/3/

You should just check left of the element, and limit the animation queue than it will work as you expected.

here is a jsFiddle example.

http://jsfiddle.net/ocanal/ZUYtu/2/

Edit:

Another solution is clearQueue()

If you clear animation queue and stop the last animation before hiding it, that will work as you expected again.

http://jsfiddle.net/ocanal/ZUYtu/3/

I edited your code and this works: https://gist.github.com/3915084 . However, it is really laggy because every single mouse movement triggers your function, so because the script needs to catch up, the delay ends up being more than 1000ms.

I will continue to edit the gist to make the code more efficant...

EDIT: I switched to using setInterval() to improve performance, now I just need to add the 1000ms delay before hiding.

EDIT: It's working perfectly! :) You can see it working here

I edited your code and this works: https://gist.github.com/3915084 . However, it is really laggy because every single mouse movement triggers your function, so because the script needs to catch up, the delay ends up being more than 1000ms.

I will continue to edit the gist to make the code more efficant...

EDIT: I switched to using setInterval() to improve performance, now I just need to add the 1000ms delay before hiding.

EDIT: It's working perfectly! :) You can see it working here

I edited your code and this works: https://gist.github.com/3915084 . However, it is really laggy because every single mouse movement triggers your function, so because the script needs to catch up, the delay ends up being more than 1000ms.

I will continue to edit the gist to make the code more efficant...

EDIT: I switched to using setInterval() to improve performance, now I just need to add the 1000ms delay before hiding.

EDIT: It's working perfectly! :) You can see it working here. I also made it hide when the mouse is moved outside of the browser window, using jQuery's mouseout().

Winning solution