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