I'm currently facing an issue with trying to create a step-by-step operation that involves fading the container div around a target div, changing the background, and then fading it back in. The problem is that all the functions in this block are being called simultaneously, causing the background to be swapped out immediately before the div fades out and in. I'm unsure of how to achieve the desired stepped operation.
For now, let's disregard the "myType" part. There is a dropdown menu on the page that allows users to select different background images for the div based on their selection. I have omitted this functionality in the code below as it is not relevant to the current issue.
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 actual implementation differs from what was previously described. I have an array of images from which I generate a URL by manipulating the base URL with the "url" variable, followed by appending the specific image based on the index. This approach worked fine before I attempted to implement a fade in and out effect for the wrapper div.
$(myType).change(function() {
$("#itemCustomize").fadeOut(500, function() {
$("#itemBaseImg").css('background-image', url + itemBaseImg[myType.selectedIndex] + ")");
});
$("#itemCustomize").fadeIn(500);
});