I've been searching around and using bits and pieces I've found (mostly on this site) to help me get as far as I am, but am afraid I kind of painted myself into a corner here by taking a route I shouldn't have early on. Basically I'm trying to create like a light switch. On load, the page background is black with an image with black background around a frame(there is some light glare/glow which is why there is an image). When you click the switch it changes the background color to white and changes that image to something else with a white background. This is working fine but I want to add a fade so it isn't an instant change, kind of like a light fading on/off. Due to the way I got the earlier part working, I'm wondering if this will be more difficult than it should.
I've searched and read that there is no fade of background colors without containers and such. Just unsure of how I would do so with how I have things already. I'm open to suggestions completely, even if it means redoing some of the previous things in different ways. I left some commented things in just to show some things I tried previously. I'm pretty new to jQuery so I expect that some of this may look off completely.
Fiddle added. Images are just mock images but serve their purpose http://jsfiddle.net/timtim123/7wh4B/
HTML:
<body id="bodyback">
<img id="out" src="rhino.png" width="527" height="376" border="0" />
<img id="frame" src="frame.png" width="589" height="377" border="0" />
<img id="paper" src="paper.png" width="142" height="214" border="0" usemap="#links" />
<img src="background.png" id="backimg"/>
<img src="background2.png" id="backimg" style='display:none;'/>
<div id="lightswitch">
<img src="switchdark.png" width="46" height="275" border="0" alt="Make it light" />
</div>
CSS:
#bodyback {
background-color:black;}
#backimg
{
position:absolute;
top: 0px;
left: 0px;
z-index: 2;
}
#backimg2
{
position:absolute;
top: 0px;
left: 0px;
z-index: 2;
}
#lightswitch
{
top: 0px;
left: 900px;
position:absolute;
z-index: 7;
}
JS:
$("#lightswitch").click(function() {
var src = $('#backimg').attr('src');
//change background image and color to white
if(src == 'background.png') {
// $("#backimg").fadeTo('slow', 0.3, function()
// $(this).attr("src","background2.png"),
$("#backimg").attr("src","background2.png"),
$("#bodyback").css("background-color","white");
//change background image and color back
} else if(src == "background2.png") {
$("#backimg").attr("src","background.png");
$("#bodyback").css("background-color","black");
}
});
Here's a very simple jQuery plug-in option, if you want to go that route
One option is jQuery UI color animation. It's a very simple plug-in with easy to use documentation. Just put the script in your head tag, and you're ready to go.
EXAMPLE (comes from the jQuery docs)
You'll notice with this, you set a backgroundColor property, and it will animate to whatever background color that is.
From what I've looked at, going back and doing something from scratch, as opposed to using the plug-in, (despite being probably a fantastic exercise in learning to code cool stuff) is a little bit tricky. Depends on your purposes.