jQuery 1.4 Animation Techniques - Index of

[ 171 ]
Chapter 6
2. The script we need is a little longer, but is still pretty simple. In the empty function at
the end of the page add the following code:
$("img").click(function() {
var img = $(this);
if(!img.hasClass("full")) {
img.addClass("full").effect("scale", { percent: 400 },
function() {
$("", {
href: "#",
text: "x",
click: function(e) {
e.preventDefault;
var a = $(this);
a.parent().find("img").removeClass("full").effect("scale", {
percent: 25 });
a.remove();
}
}).appendTo("#container");
});
};
});
3. Save the page as scale.html. In the stylesheet for this example, we'll need the
following code:
#container { position:relative; float:left; cursor:pointer; }
#container img { width:150px; height:150px; }
#container a {
position:absolute; top:0; right:10px; color:#f21515;
text-decoration:none; font:bold 22px "Nimbus Sans L", "Helvetica
Neue", "Franklin Gothic Medium", Sans-serif;
}
#container a:hover { color:#fb5e5e; }
4. Save this file as scale.css.