All of the examples of this concept I have found on here don't do exactly what I need.
I started with this code from Here.
$(document).ready(function() {
$("#amber").click(function() {
$(".about-bg").css({'background-image':'url(images/amber.jpg)'});
})
});
And that got my background images to swap no problem. However, I want to be a bit fancy and have the images fade from one to another. So I altered it to this:
$(document).ready(function() {
$("#amber").click(function() {
$(".about-bg").hide().css({'background-image':'url(images/amber.jpg)'}).fadeIn(500);
})
});
However, that causes the background images to just switch and my content fades in instead. The options I have found thus far seem to cause the same to occur.
Is what I want possible or do I need to just look into a carousel/slider option?
Edit: Someone marked this as already answered but the posted link isn't for an onclick event and from what I read on the comments that will also fade the content with the image. Maybe I'm wrong because some of this stuff I just can't wrap my head around at times.
