jQuery 1.4 Animation Techniques - Index of

[ 153 ]
Chapter 6
2. Add the following script to the empty function at the bottom of the template file:
$("#show").click(function() {
$("#firefox").effect("transfer", {
to: "#apps",
className: "ui-effect-transfer"
}, 1000);
});
3. Save the page as transfer.html. For the stylesheet add the following code to a
new file:
body {
font:normal 14px "Nimbus Sans L", "Helvetica Neue", "Franklin
Gothic Medium", Sans-serif;
}
#install {
width:417px; height:339px; position:relative;
background:url(../img/install.jpg) no-repeat 0 0;
}
#firefox {
width:124px; height:121px; position:absolute; left:34px;
top:132px; background:url(../img/firefox.png) no-repeat 0 0;
}
#apps {
width:54px; height:52px; position:absolute; right:58px;
top:172px; background:url(../img/apps.png) no-repeat 0 0;
}
.ui-effect-transfer { border:2px solid #7bee76; }
4. Save this file as transfer.css in the css folder.