jQuery 1.4 Animation Techniques - Index of

ackground:url(../img/dock.png) no-repeat 0 0;
}
.icon { position:absolute; top:-15px; left:44px; }
.icon img { border:none; }
#mail { left:108px; }
#safari { left:170px; }
#firefox { left:229px; }
#itunes { left:289px; }
4. Save this file as size.css in the css folder.
5. When we run the file in a browser, we should see that the individual items in the
menu grow and shrink as the mouse pointer moves over them:
[ 151 ]
Chapter 6
In the previous screenshot we see the menu as the pointer hovers over one of the items in
the menu.
What just happened?
We attach mouseenter and mouseleave event handlers to each item within the dock using
jQuery's hover() method, which accepts two functions, the first being executed on the
mouseenter event, the second being executed on mouseleave.
In the first function we use the stop() method to manage the queue and then animate the
element's position by changing its top CSS value. Using stop() here prevents an unsightly
jarring of the element's position on screen.
We then navigate down the image inside the link and call the stop() method on this
element too before applying the size effect. We provide integer values for the width and
height keys in a configuration object and as these values are larger than the dimensions of
the image, the image will be increased in size.