68610

jQuery: fade out, change background image, then fade in

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); });

Answer1:

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>

Answer2:

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); }); });

Recommend

  • How can i use Django smart select to filter ManyToManyField?
  • Client side validation mvc dropdown
  • Flash radiobutton: how do I get the selected radiobutton?
  • How can I restyle a word when rendering a pdf with pdf.js?
  • uml Composition relationships to RDF and OWL
  • Creating a DropDownList
  • Javascript, Regex - I need to grab each section of a string contained in brackets
  • as3-flash: any way to access all the instances placed in different frames from document class?
  • ListItem.Attributes.Add not working
  • Bypass multiple inheritance in Java
  • Conversion from string “a” to type 'Boolean' is not valid
  • wxPython: displaying multiple widgets in same frame
  • How can I enlarge video fullscreen without the affected interface project in as3?
  • Install PHP intl extension on MacOS
  • How to use carriage return with multiple line?
  • Use of this Javascript
  • Python urlparse: small issue
  • Cancel a live stream “fast motion” catch-up in Flash
  • C++ Partial template specialization - design simplification
  • FileReader+canvas image loading problem
  • QLineEdit password safety
  • What is Eclipse's Declaration View used for?
  • Deleting and Updating values from a cusrsor adapter
  • Window Size for Mac application
  • javascript inside java/jsp code
  • htaccess rewriting URLs with multiple forward slashes
  • Updated Ionic CLI but shows previous version (Windows)
  • Display Images one by one with next and previous functionality
  • ORA-29908: missing primary invocation for ancillary operator
  • Web-crawler for facebook in python
  • Jquery - Jquery Wysiwyg return html as a string
  • How to get next/previous record number?
  • SVN: Merging two branches together
  • Data Validation Drop Down Box Arrow Disappearing
  • A cron job substitute?
  • Python: how to group similar lists together in a list of lists?
  • How do you join a server to an Active Directory (domain)?
  • How does Linux kernel interrupt the application?
  • python draw pie shapes with colour filled
  • Append folder name and increment by 1 using batch script