Im trying to get multiple background images to (cross)fade when clicked on a specific button.

I got a very simple jscode that changes the css background-image of a div and that works perfect but now comes the part how to cross of just fadein the image and i have no clue how to do this.

 $("#test").click(function(){
 $("#test_bg").css("background-image","url(css/__test.png)");

Again this works perfect but i cant find any examples how i can add fade effects to this. I know there are other ways for example with hiding div's etc but i rather dont use that.
I searched for jquery options like fadein,fadeout,fadeto but cant get it to work.

 $("#test_bg").fadeIn("slow").css("background-image","url(css/__test.png)");

For example doens't do anyhting. (fadeOut works though)

I dont code a lot so maybe what im trying to do in this way is not possible or i do it wrong but maybe someone has a idea or a example for this.

http://www.jsmadeeasy.com/javascript.../list_test.asp

Those are very old scripts and not working slick enough, already tried some of them and they use hided div's etc, not what im looking for.
I rather have a jquery or mootools solution but thanks for answering though.

Have you tried these?
http://jqueryfordesigners.com/image-...de-transition/

Yes but they work with img's and not div's with a css background. Not a option for what i need.

Hmm, no i doupt the fade() functions would work on their own as in your example. I'm guessing they just hide/unhide an element by adjusting it's alpha and then adding a "display:none;" property.

But why wouldn't you want to hide divs? That's what the fade() functions does anyway. Couldn't you just have one div for each image, hidden at first, then just fadeOut() one div and fadeIn() another?

Well i have to work with multiple hidden div's with images i guess, there is just no way to do this with pure javascript and only 1 div. I can get it to work only the animations are not simultaneous then (which makes sense when you work with 1 div) or i have to forget about the animations but it doens't look as slick then.

Shame would be a nice trick if it was possible.

If you want simultaneous changes to multiple elements use one timer function to trigger several events.

By the way,

Why are you not simply using two absolutely positioned image elements with a z-index of 1 and crosss fading those in the one container?

Originally Posted by chrishirst

If you want simultaneous changes to multiple elements use one timer function to trigger several events.

Well thats the thing, i got only one element (one div) so you cant add multiple animations/actions to it. If you fade that div out you cant let it fade in until the fade out action is complete (its the same div, makes sense if you think about it) and as far as i know you cant animate only the css background-image, again a shame because it would be pretty slick with just a small bit of code.

Originally Posted by chrishirst

By the way,
Why are you not simply using two absolutely positioned image elements with a z-index of 1 and crosss fading those in the one container?

Hmm that sounds like a better idea then using multiple hidden div's. Thnx for the tip, will try it out.

Your having problems with fadeIN ?

Ie: Is it already displaying?
Or is it invisible and the fadein doesnt work?

To use fade in on jquery, you need to set the div to display:none; on the css also.

It's like this, i have a div with a background-image thats already being displayed (so not hidden).
I thought it would be cool since you can switch background-images with jquery to add effects to it and to try make this work with only using 1 div, but like you say it cant be done because you have to fadeOut or hide the div first before fade or animate the new background-image in and then you cant get it simultaneous.

Just forget about it all what i had in mind, just not possible

Hey TheSir,
There is always a way to do something. Don't let people fustrate you in order to achieve a goal. I believe you can do this.
Here is a way you can achieve something similar to what you are requesting. Feel free to modify it to fit your needs.

You can also do this by following these steps:
1. getting the latest jquery (jquery.com)
2. create a lib.js file and paste this code in the lib.js file
jQuery(document).ready(function(){
//Fade Effect
jQuery(".fade span").css("opacity","0");
jQuery(".fade span").hover(
function () {
jQuery(this).stop().animate({
opacity: 1
}, "slow");
},
function () {
jQuery(this).stop().animate({
opacity: 0
}, "slow");
}
);
}); // the closing bracket to the document ready function

3. Here is an example you can Paste in your css:
.theBtn {
cursor: pointer;
background: url(../images/read-more-btn2.jpg) 0 0px no-repeat;
float: right;
height:26px;
margin: 10px 10px 0 0;
width:118px;
}

.theBtn span {
display:block;
text-indent:-99em;
width:118px;
height:26px;
background: url(../images/read-more-btn2.jpg) 0 -26px no-repeat;
cursor: pointer;

}

4. Here is an example of the html code:
<a href="#" class="theBtn fade"><span></span></a>


5. Thats it!
In your case you can just modify it so that your onclick test function wraps around it. I think that should work.

Also, this might be a good demo that could help you:
http://bavotasan.com/tutorials/creat...r-fade-effect/

Hi, new to the forums and kinda new to javascript as well.

I have the exact same problem as OP has. I want to have a div background-image change when I click a thumbnail. The change itself works but it's the transition that is the problem. I have searched around for quite some time now for a solution and come up with something that might work, but I'm not all the way there yet.

Since CSS3 can use multiple backgrounds I thought I could have the image as background-image and then a one-colored white alpha zero gradient on top of it like this:

background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,0)), url("../images/rose.jpg") no-repeat top left;

Then I could change the alpha value of the gradient with javascript and thus fake a fade out of my background but it's the gradient that fades in:

var fade = 0;
function fadeInImage() {
            fade += .1;
            document.getElementById("content-left").style.background = "-moz-linear-gradient(rgba(255,255,255," + fade + "), rgba(255,255,255," + fade + ")), url('images/rose.jpg') no-repeat top left";
            document.getElementById("content-left").style.background = "-webkit-linear-gradient(rgba(255,255,255," + fade + "), rgba(255,255,255," + fade + ")), url('images/rose.jpg') no-repeat top left";
            document.getElementById("content-left").style.backgroundSize = "cover";
            if(fade < 1) {
                setTimeout(fadeInImage, 20);
            }
        }

Now my idea was to change the background-image when the gradient is covering the old one, and then fade the overlaying gradient out again, revealing the new background. This should simulate a smoother transition with a quick fade out/fade in, although not actually a crossfade, but kinda close.

My whole solution looks like this:

var fade = 0;
function imageTransition() {
    fadeOutImage();
    swapImage();
    fade = 1;
    fadeInImage();
}

function fadeOutImage() {
    fade += .1;
    document.getElementById("content-left").style.background = "-moz-linear-gradient(rgba(255,255,255," + fade + "), rgba(255,255,255," + fade + ")), url('images/rose.jpg') no-repeat top left";
    document.getElementById("content-left").style.background = "-webkit-linear-gradient(rgba(255,255,255," + fade + "), rgba(255,255,255," + fade + ")), url('images/rose.jpg') no-repeat top left";
    document.getElementById("content-left").style.backgroundSize = "cover";
    if(fade < 1) {
        setTimeout(fadeOutImage, 20);
    }
}

function swapImage() {
    document.getElementById("content-left").style.background = "-moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,0)), url('images/rainforest.jpg') no-repeat top left";
    document.getElementById("content-left").style.background = "-webkit-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,0)), url('images/rainforest.jpg') no-repeat top left";
    document.getElementById("content-left").style.backgroundSize = "cover";
}

function fadeInImage() {
    fade -= .1;
    document.getElementById("content-left").style.background = "-moz-linear-gradient(rgba(255,255,255," + fade + "), rgba(255,255,255," + fade + ")), url('images/rainforest.jpg') no-repeat top left";
    document.getElementById("content-left").style.background = "-webkit-linear-gradient(rgba(255,255,255," + fade + "), rgba(255,255,255," + fade + ")), url('images/rainforest.jpg') no-repeat top left";
    document.getElementById("content-left").style.backgroundSize = "cover";
    if(fade > 0) {
        setTimeout(fadeInImage, 20);
    }
}

The functions work by themselves, but not when I try to call the imageTransition() with one onclick to trigger them all after one and other.

Maybe someone can help making this solution work or get some ideas of how to solve it.

Would really appreciate all the feedback I can get!

Cheers!


UPDATE!

I actually got it to work!

Didn't even neeed the swapImage. I just made the imageTransition function called from onclick like this:

function imageTransition() {
        fadeOutImage();
        setTimeout(function(){fadeInImage()}, 500);
    }
}

Just change the value of fade and the ms values of the setTimeout to change the transition speed.

Final working code:

var fade = 0;
function imageTransition() {
        fadeOutImage();
        setTimeout(function(){fadeInImage()}, 500);
    }
}

function fadeOutImage() {
    fade += .1;
    document.getElementById("content-left").style.background =  "-moz-linear-gradient(rgba(255,255,255," + fade + "), rgba(255,255,255,"  + fade + ")), url('images/rose.jpg') no-repeat top left";
    document.getElementById("content-left").style.background =  "-webkit-linear-gradient(rgba(255,255,255," + fade + "),  rgba(255,255,255," + fade + ")), url('images/rose.jpg') no-repeat top  left";
    document.getElementById("content-left").style.backgroundSize = "cover";
    if(fade < 1) {
        setTimeout(function(){fadeOutImage()}, 20);
    }
}

function fadeInImage() {
    fade -= .1;
    document.getElementById("content-left").style.background =  "-moz-linear-gradient(rgba(255,255,255," + fade + "), rgba(255,255,255,"  + fade + ")), url('images/rainforest.jpg') no-repeat top left";
    document.getElementById("content-left").style.background =  "-webkit-linear-gradient(rgba(255,255,255," + fade + "),  rgba(255,255,255," + fade + ")), url('images/rainforest.jpg') no-repeat  top left";
    document.getElementById("content-left").style.backgroundSize = "cover";
    if(fade > 0) {
        setTimeout(function(){fadeInImage()}, 20);
    }
}