Posted By

relaxasaurus on 01/25/10

Tagged

Versions (?)

Last Edited at 01/25/10 01:03pm

Statistics

Viewed 663 times

Favorited by 0 user(s)

Related snippets

Proper jQuery Cross-Fading

/ Published in: JavaScript

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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

//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;
		}		
	});
}