Fade background image with click

[smappdooda]

I want to fade the background image of one page to another when I click links. (I have three of them so it has to toggle back and forth) I found this code:

$(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.

I have seen other options using CSS transitions but couldn’t get any of them to work. My knowledge of javascript and jquery is lacking. I tried to ask this on stack Overflow but they tend to be uppity jerks over there and were not helpful.

Anyone have a suggestion?

[smappdooda]

After more searching (I’ve been at this for about 5 hours now) I found this which seems to do what I want.
https://github.com/rewish/jquery-bgswitcher

[Shikkediel]

The problem is that there’s no such thing as background opacity (needed to animate a fade) so that script is just a ‘helper’ with the common workaround – creating multiple elements and alternately fading them (if I read the script correctly).

[Chromawoods]

Something like this? You need to pass a callback function for when the fade out function has finished. In my example, I toggle a couple of classes and then begin fading in.

http://codepen.io/chromawoods/pen/dopbKa

[smappdooda]

That looks like that would work but I don’t want to unravel everything I have already done ha ha.

You can see what I did/needed Here.

[Author]

Posts