If the image is reducing and all four dimensions (left, top, width and height) have hit their target, then the animation engine is stopped by switching off the this.bTicks flag, hiding the full size image and showing the thumbnail again. Expanding images stay active in case the user changes the size of the browser window.
// if reducing and size/position is a match, stop the tick
if ( !this.bExpand && (nHit == 4) )
this.oImg.style.visibility = "hidden";
this.oDiv.style.visibility = "hidden";
this.oThumb.style.visibility = "visible";
this.bTicks = false;
Finally, if still active, the animation engine schedules another tick a short time in the future.
if ( this.bTicks )
var pThis = this;
To see a working demonstration of this code, click here.
A little disclaimer:
I have endeavored to make this code as browser compatible as possible, meaning that it’s been tested with the latest versions of Internet Explorer (6.0) and Netscape (7.1) – this accounts for over 80% of users).
About the Author
Guyon Roche is a freelance web developer in London, Great Britain. He specializes in Windows platforms with an interest in bridging the gaps between different technologies, visit www.silver-daggers.co.uk for more details. He can be reached via e-mail at email@example.com
March 27, 2003
Revised: July 9, 2004