jQuery 1.4 Animation Techniques - Index of

Download from Wow! eBook
Extended Animations with jQuery UI
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 of the template file:
2. Add the following JavaScript to the third element at the bottom of the
:
$(".icon", "#dock").hover(function() {
$(this).stop().animate({
top: -31
}).find("img").stop().effect("size", {
to: { width: 64, height: 64 }
});
}, function() {
$(this).stop().animate({
top: -15
}).find("img").stop().effect("size", {
to: { width: 48, height: 48 }
});
});
3. Save this file as size.html. We also need some styling. In a new file add the
following code:
#dock {
width:380px; height:90px; position:fixed; bottom:0;
[ 150 ]