Sunday, December 17, 2006

Image fade with MochiKit

MochiKit rocks. I needed to add an image fade for a site I am revamping and it was suprisingly easy using Mochikit. Go here for an example. Here's the relevant code

var deedee = new Image();
deedee.src = 'images/deedee.gif';
var dexter = new Image();
dexter.src = 'images/dexter.jpg';


function onImageMouseover(){
fade("bigPic", {"to" : "0.1", "duration" : "0.4",
"queue" : "break", afterFinish: function () {
$("bigPic").src = dexter.src;
appear('bigPic', {"duration" : "0.4", "queue" : "break"});
}});
}

function onImageMouseout(){
fade("bigPic", {"to" : "0.1", "duration" : "0.4",
"queue" : "break", afterFinish: function () {
$("bigPic").src = deedee.src;
appear('bigPic', {"duration" : "0.4", "queue" : "break"});
}});
}

1 comment:

Unknown said...

Really its a nice example for the new bee of Mochikit.
Carry on...