Time for action – resizing elements

A popular use of growing and shrinking elements is the Fisheye menu, where elements grow when the mouse pointer hovers over them, and shrink back down when the pointer moves off them. This effect is also used by the icons on the dock in Apple's OSX.

Using the size effect, we can implement our own basic Fisheye menu with just a few lines of code.

  1. Add the following markup to the <body> of the template file:
    <div id="dock"> <a href="#" class="icon" id="finder"><img src="img/finder.png"></a> <a href="#" class="icon" id="mail"><img src="img/mail.png"></a> <a href="#" class="icon" id="safari"><img src="img/safari.png"></a> <a href="#" class="icon" id="firefox"><img src="img/firefox_small.png"></a> <a href="#" class="icon" ...

Get jQuery 1.4 Animation Techniques Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial