In this post we will be looking at jQuery’s animate event. What does animate do? Elementary my dear Watson, it animates stuff! We are going to be making a div that when clicked (using jQuery’s click event) moves across the screen, and when clicked again, moves back to it’s original position. We will also be learning how to use animates callback function. This is the function that controls what happens after the animation is complete. Let us begin.
Here is our css:
width: 195px;
height: 154px;
position: absolute;
left: 100px;
top: 100px;
}
So what do have here? We have a class called “animateme” which has a width and height. We see that it has a position of absolute, which means we can define where it is in relation to its parent element. Huh, you say? Well, as you can see we have given it an attribute of “left: 100px”, which means it will be 100 pixels left of its parent element, which in this case is the body. This could just as well be any div that contains our element. You will see it also has a position of “top: 100px”
Position absolute is also important for our animation, because we will be changing the position with jQuery (ie; increasing the “left” value of the class). Lets have a look at our html:
We have a div which we have applied our “animateme” class to, which contains our starting image, a stationery blue germ. We actually will be using 3 images in this tutorial. Firstly our stationery germ, and our 2 other images of a germ in motion, one going left, one going right.
our left germ
our right germ
our motionless germ
We will be changing our image when the animation is happening, and changing it back when the animation is complete. We are going to do this with the aforementioned (I have always wanted to use that word) animate callback function.
Lets have a look at our jQuery:
$('.animateme').toggle(function(){
$(this).html('<img src="images/right.png" />');
$(this).animate({
left: '+=500',
}, 2200, function() {
$(this).html('<img src="images/stop.png" />');
});
}, function(){
$(this).html('<img src="images/left.png" />');
$(this).animate({
left: '-=500',
}, 2200, function() {
$(this).html('<img src="images/stop.png" />');
});
});
});
As always, we have our jQuery document ready block. We then declare the selector to which we are applying our animate function: “$(‘.animateme’). So we are selecting the element with the class “animateme”.
We then use jQuery’s toggle event. Whoa! WTF is this you ask? This wasn’t part of the deal! Toggle is simple, it looks like this:
//first event
}, function(){
//second event
});
See, that’s not so scary. All toggle does is let us define two event, which the first is fired when we click the first time, the second is fired when we click the second time. Now, back to the matter at hand. We had just selected our “animateme” element.
We then change the content of our div to our moving right image like so
We then begin our animate event.
left: '+=500',
}, 2200, function() {
$(this).html('<img src="images/stop.png" />');
});
We select our current element with jQuery’s $(this) selector. The next thing is to create the actual animation. We are going to be repositioning our element by adding 500px to its left css attribute from its current position. We then declare the time it must take to complete our animation in milliseconds, 2200 which is 2,2 seconds. We then have the callback function, where we are simply re-replacing our html inside our div with our stationery germ image.
For the return journey, we simply reverse the first animate function. We set the left postion to -=500 (minus 500 from its current position), and again, replace the image.
One more thing we are adding here is an image preloader, which simply uses javascript to preload the 2 movement images, so when the image is called, it doesn’t have to load and the change is instant. That looks like this:
pic1= new Image(195,154);
pic1.src="images/left.png";
pic2= new Image(195,154);
pic2.src="images/right.png";
pic3= new Image(195,154);
pic3.src="images/stop.png";
}
Thats it for our tutorial. Hope you have many years of happy animating. As always, you can check out a demo here, and download the source files here
