Cool transitioniong effect between images using jQuery animate

Tuesday, 8 December 2009


This tutorial looks at using jQuery animate to transition from one image to another. jQuery's built in animate function provides a method for easily animating styles such as height, color and position. I will show you a method of toggling backwards an forwards between two images by changing on images dimensions to match the others and by fading one image out to reveal the other.


You can view a demo of this functionality here.

You can download the code for this tutorial here.



Each of the steps should work simultaneously to give a smooth transition from one image to the other. The current image will gradually change width/height while fading out to reveal the other image. The functionality will allow transistioning backwards and forwards between the two images.

This functionality is a great example of jQuery's animate function and could be applied in a variety of ways. You could extend it to cycle through several images, use it in an online catalog for different views of an item or to make an interesting photo album.

In our HTML we have a div marked with class .fade_switch, inside that are the two images that will be used to transition between:

<div class='fade_switch' style='display:block;position:relative;'>
 <img src='./images/green_present.png' />
 <img src='./images/zim.jpg'/>
</div>

This is all the markup that is needed, now let's look at our javascript:

$("document").ready(function() {
 $(".fade_switch img").each(function() {
  var img = new Image;
  img.src = this.src;
  var my_parent = $(this).parent(".fade_switch");
  
  var my_index = $(my_parent).children().index(this);
  
  var myself = $(this);
  
  $(img).load(function() {
   $(myself).data("start_w", img.width);
   $(myself).data("start_h", img.height);
   if (my_index == 0) {
    $(my_parent).css({"width":img.width, "height":img.height});
   } else {
    $(myself).hide();
   }
  });
  
  $(this).css({"position":"absolute", "top":"0px", "left":"0px"});
 });

We begin by looping over each image belonging to a .fade_switch div. We preload the image and after each image has loaded we store its dimensions by using the data function, this will be used later when we animate back to its original size (this is required by IE).

Next we check to see if it is the first image of the two, if so we set the parent .fade_switch element to the size of the image. We then hide the other image.

We finish by setting each image to position absolute, so one image sits in front of the other.

Then we have the click function for each .fade_switch div:

$(".fade_switch").click(function() {
  if (!$(this).is(':animated')) {
   var vis_img = $(this).children(":visible");
   var hid_img = $(this).children(":hidden");
   
   $(vis_img).css("z-Index", "100");
   
   var vis_width = $(vis_img).data("start_w");
   var vis_height = $(vis_img).data("start_h");
   
   var hid_width = $(hid_img).data("start_w");
   var hid_height = $(hid_img).data("start_h");
   
   $(hid_img).css({"z-Index":"1","width":vis_width,"height":vis_height}).show();
   
   
   
   $(vis_img).animate({
    "opacity" : "0",
    "width" : hid_width,
    "height" : hid_height
   }, function() {
    $(this).css("z-Index", "1").hide().css("opacity", "100");
   }); 

   $(hid_img).animate({
    "width" : hid_width,
    "height" : hid_height
   }, function() {
    $(this).css("z-Index", "100");
   });
   
   $(this).animate({
    "width" : hid_width,
    "height" : hid_height
   });
  }
 });

We first check to see that this element is not being currently animated, this is done to stop multiple clicks from screwing things up mid transition. This is done using the :animated selector: if (!$(this).is(':animated')) {

We then retrieve the two elements seperately according to whether they are visible or hidden. We set the visible image to have a zIndex of 100 so it sits on top.

Next we grab the dimensions of each of the images and set the hidden image to have the same dimensions as the visible on, but with zIndex set to 1, then we set it show (it will not appear as it sits behind the other image since it has a zIndex of one and both are absolutely positioned).

Once this is done we begin the animation. We animate the top image to opacity 0, and to shrink or grow to the behind image. Once it has completely faded and changed its dimensions we set it to zIndex 1 and hide it. We animate the back image to its original width and height and set it to zIndex 100 and we also make sure the parent div also has matching width and height.

If you have any great transitioning tricks or want to recommend any good tutorials, share them in the comments below.
blog comments powered by Disqus