Question:

I'm trying to fade the container div around this target div, then change the background, then fade it back in. The problem is that all the functions in this block are called instantaneously, which means the background is swapped out immediately, then the div fades out and in. Not sure how to implement this as a stepped operation.

For now, don't worry about the "myType" part. I have a dropdown menu on the page that you select which changes the background image in the div to a different image based on the selection. I've removed that functionality from this code, since it isn't actually relevant.

HTML:

<div id="itemCustomize"> <div id="itemBaseImg"></div> </div>

jQuery:

$(myType).change(function() { $("#itemCustomize").fadeOut(500); $("#itemBaseImg").css('background-image', 'url(myimage.jpg)'; $("#itemCustomize").fadeIn(500); }

Update:

The true implementation is actually different. I should have considered that. I have an array of images which I generate an image URL from by parsing the base URL with the variable "url", then add the base image part of the URL by calling on an index. This worked before it was wrapped in a callback function, but now that I want to fade in and out the wrapper div, it doesn't work.

$(myType).change(function() { $("#itemCustomize").fadeOut(500, function() { $("#itemBaseImg").css('background-image', url + itemBaseImg[myType.selectedIndex] + ")"); }); $("#itemCustomize").fadeIn(500); });

You can use the complete callback on jQuery fadeOut function to make them run one after another.

$(select).change(function() { $("#containerdiv").fadeOut(500, function() { $("#targetdiv").css('background-image', 'url(myimage.jpg)'; $("#containerdiv").fadeIn(500); }); }

See: <a href="http://api.jquery.com/fadeout/" rel="nofollow">http://api.jquery.com/fadeout/</a>

I figured it out. I needed to create a variable to pass into the index. Thanks for everyone's help!

$(myType).change(function() { var myIndex = this.selectedIndex; $("#itemCustomize").fadeOut(50, function() { $("#itemBaseImg").css('background-image', url + itemBaseImg[myIndex] + ")"); $("#itemCustomize").fadeIn(200); }); });