Example #19: pause animation cycle on mouseover

There is a animation cycle rotating three images. Once you move the mouse cursor over it, it pauses until the mouse is moved away.

A little helper function checks whether the mouse is over the image. If that's the case a deferred jQuery object waiting for the mouseleave event is returned.
function noHover() {
    return this.is(':hover') ? this.wait('mouseleave') : this
}

The running loop can be written in a single jQuery line.

$('#images > img').hide().repeat().each($).fadeIn($)
    .wait(1000).wait(noHover).fadeOut($);

Other examples with animations

Other examples with each-loops

Other examples with open loops

Other examples with timeouts