Revision: 22888
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at January 25, 2010 13:03 by relaxasaurus
Initial Code
//Switch background image
function bgswitch() {
$("#homeBackground li:first").css("z-index","3"); //Using z-index's to get a proper cross-fade
$("#selector li").click(function(){
if ($(':animated').length > 0) { //wait until animation is complete
return false;
} else {
if ($(this).attr("class") != "active" ) {
var index = $("#selector li").index(this);
$("#homeBackground li:eq("+ index +")").css("z-index","2");
$("#homeBackground li:eq("+ index +")").show();
/*if($.browser.msie){
$("#sections div.active").removeClass("active");
} else { */
$("#sections div.active").fadeOut("slow", function(){
$("#sections div:eq("+ index +")").fadeIn(1050);
$(this).removeClass("active");
$("#sections div:eq("+ index +")").addClass("active");
});
/*}*/
$("#homeBackground li.active").fadeOut("slow", function(){
$(this).css("z-index","1");
$("#homeBackground li:eq("+ index +")").css("z-index","3");
$(this).removeClass("active");
$("#homeBackground li:eq("+ index +")").addClass("active");
/*if($.browser.msie){ $("#sections div:eq("+ index +")").addClass("active"); }*/
});
//$("#homeBackground li.active").fadeOut("slow");
//$("#homeBackground li:eq("+ index +")").fadeIn("slow");
$("#selector li").removeClass("active");
$(this).addClass("active");
}
return false;
}
});
}
Initial URL
Initial Description
Looked for a simple, efficient cross-fading script that does it properly without fading to the background color. This script uses z-indexes to prevent the background from ever showing, creating a smooth fade.
Initial Title
Proper jQuery Cross-Fading
Initial Tags
javascript, jquery
Initial Language
JavaScript