The problem is the do loop will loop forever, this hangs the app.

Javascript runs in 1 thread, only 1 thing can be run at a time. If some other code wants to run it just get queued up to be run later when the current running code is finished. So on mouse over this starts looping forever, constantly reseting the styles. The mouse out code will never run because it is waiting for the loop to finish, and it never will.

Start thinking events, you have 2 events here: when the mouse goes over the element and when the mouse leaves. So when they hover the image you want to start animating the button, when they are done hovering you want to stop the animation.

When each event is fired it runs some code, that code calls other functions and functions may call functions, but eventually those will all finish and everything that needed to run will be done. Now another queued up chunk of code can be run. Each chunk of code like that (functions calling functions) is called a call stack.

For better performance browsers only update the webpage once after each callstack, so while animating we need to draw 1 frame and wait.

To do that you can use setTimeout, setTimeout just takes a function and a time in milliseconds and runs that function later in its own stack. So we can pretty much replace your do loop with a recursive setTimeout 0

Here is a working solution, let me know if you understand. http://jsfiddle.net/MXb3j/2/ Since the image moves out of the way it triggers a mouseout and stop, so you get the effect of pushing it in a circle.