11843

jQuery- dynamically alternate between image sources within an animated div

I have a menu that is animated to slide across the page when triggered by clicking on an image of an arrow. I'd like to switch the arrow to a different image source once the menu's animation has completed, and then return back to the original file when the menu has been closed.

Best way to do this? Thank you!

HTML:

<div id="slider"> <div id="trigger_right"> <img class="arrow_small" src="images/left_small.png" alt="slide menu out" /> </div> <div class="trans" id="overlay"></div> <div id="content"> <p>This is content</p> </div> </div>

Javascript:

$(function() { $('#trigger_right').toggle(function (){ $('#slider').animate({'width':'100%'}, 1500); $('.arrow_small').attr('src','images/right_small.png'); }, function() { $('#slider').animate({'width':'30px'}, 1500); $('.arrow_small').attr('src','images/left_small.png'); }); });

Answer1:

jQuery's .animate has a callback that is called when the animate is finished so you can use that to change the images at the appropriate time:

$(function() { $('#trigger_right').toggle(function () { $('#slider').animate({'width':'100%'}, 1500, function() { $('.arrow_small').attr('src','images/right_small.png'); }); }, function() { $('#slider').animate({'width':'30px'}, 1500, function() { $('.arrow_small').attr('src','images/left_small.png'); }); }); });

The above assumes that you only have one .arrow_small element of course. Using a class for the arrow and a sprite sheet for the images would be better but that would only require changing the $('.arrow_small').attr() parts to $('.arrow_small').toggleClass() calls as Rob suggests.

Answer2:

If I understand correctly, you only want the images to change after the menu animation has completed.

One way, perhaps not the best, would be to make the JavaScript that changes the src attribute occur after a set period of time using setTimeout(). Instead of:

$('.arrow_small').attr('src','images/right_small.png');

You would have:

setTimeout("toggleImages()", 1500); function toggleImages(){ // some code to toggle them }

I haven't tested this, but give it a try. Hope it helps!

Answer3:

I would suggest you set the images up in CSS as classes and then do something like:

.toggleClass("right-small left-small");

Recommend

  • CSS Bundling and Internet Explorer's Limit
  • Function to check if jquery plugins are already initialized
  • Uploading image using SpringMVC 4.0 Multipart
  • Give wx.StaticBitmap a transparent background? wxpython
  • NSOpenPanel's setDirectoryURL doesn't work on Lion
  • how to swap Image in jquery
  • How do I get placemark icons to load over ssl?
  • Price range slider for my website
  • How to stop onclick from firing before ondblclick in JS/HTML
  • If string is … then replace it with an image?
  • Keep transition effect on 1 div from moving the div that follows?
  • In java, how do you retrieve images from a jar file?
  • window.onbeforeunload in javascript
  • What's wrong with my datatrigger binding?
  • MVVM: Image Bind Source from FileOpenPicker
  • Is it better to use the “hidden” CSS attribute or fetch each set of new images?
  • Are there any issues with placing image as background on an extended JFrame?
  • Python PIL to extract number from image
  • Outputting SharePoint Hyperlink Column as URL
  • Why does it draw lines in the wrong place?
  • Floated image with variable width and heading with background image
  • Disable Kendo Autocomplete
  • How to view images from protected folder with php?
  • Display images in Django
  • How to have background script and something similar to a default popup?
  • HTTP/2 streams vs HTTP/1.1 connections
  • Python urlparse: small issue
  • Syntax for setting draggablecursor property in google maps api
  • Resize panoramic image to fixed size
  • Importing jscolor library in angular 2
  • GridView Sorting works once only
  • How to get icons for entities from eclipse?
  • Java static initializers and reflection
  • unknown Exception android
  • costura.fody for a dll that references another dll
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • Conditional In-Line CSS for IE and Others?