jQuery 1.4 Animation Techniques Beginner's Guide

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 ...