jQuery 1.4 Animation Techniques - Index of

[ 115 ]
Chapter 5
What just happened?
The HTML could be any simple blog post consisting of some text and a couple of images. The
points to note are that each image is given an id attribute so that it can be easily referenced,
and that each image is actually the full-sized version of the image, scaled down with width
and height attributes.
The styles used are purely to lay out the example; very little of the code is actually required
to make the example work. The expander-wrapper styles are needed to position the
overlaid images correctly, but other than that the styling is purely arbitrary.
We're floating the second image to the right. Again this isn't strictly necessary; it's used just
to make the example a little more interesting.
Time for action – defining the full and small sizes of the images
First we need to specify the full and small sizes of each image:
var dims = {
image1: {
small: { width: 150, height: 100 },
big: { width: 600, height: 400 }
},
image2: {
small: { width: 100, height: 100 },
big: { width: 400, height: 400 }
}
},
webkit = ($("body").css("-webkit-appearance") !== "" && $("body").
css("-webkit-appearance") !== undefined) ? true : false;
What just happened?
We create an object which itself contains properties matching each image's filename.
Each property contains another nested object which has small and big properties and
the relevant integers as values. This is a convenient way to store structured information
that can easily be accessed at different points in our script.
We also create a variable called webkit. There is a slight bug in how images floated to the
right are treated in Webkit-based browsers such as Safari or Chrome. This variable will hold
a Boolean that will indicate whether Webkit is in use.
A test is performed which tries to read the -webkit-appearance CSS property. In Webkit
browsers, the test will return none as the property is not set, but other browsers will either
return an empty string or the value undefined.