Image Cross Fade

Today’s DHTML trick is a smooth example of Image Cross Fading. The Javascript code for the whole page is rather short to begin with, but there was some rom for improvement. If you were to look at the original source file, just about everything except for the variable declarations and the so_xfade method can be reduced to this snippet, using jQuery:

$(document).ready(function(){
  $("head").append("<link href='xfade2.css' 
    rel='stylesheet' type='text/css'>");
  img = $("#imageContainer img").set("xOpacity",0).get();
  $("#imageContainer img:first").set("xOpacity",0.99).show();
  setTimeout(so_xfade,1000);
});

Currently, there doesn’t seem to be a more elegant way of doing it in jQuery, but I can’t really complain, considering how much more understandable the code is, compared to doing it the DOM way.

Posted: February 15th, 2006


Subscribe for email updates

Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.


Secrets of the JavaScript Ninja

Secrets of the JS Ninja

Secret techniques of top JavaScript programmers. Published by Manning.

John Resig Twitter Updates

@jeresig

Infrequent, short, updates and links.