Basic jQuery Tutorial: Animate div and image

In this article, I will be showing you how to animate image and div.

By animation, I just mean basic animation. This is a basic tutorial. So, please don’t expect it to be so complex animation :). It will simply be increasing the width of the image and div with animate effect.

This is a base for starting animation with jQuery.

VIEW DEMO

Here we go.

I have the following HTML tags for image and buttons:

<img src="lilies.jpg" />
<br /><br />
 
<button>Large</button>
<button>Small</button>

Here is the jQuery code to animated the image:

$("#large").click(function(){
	$("#img").animate({width: "30%"},1500);
});
 
$("#small").click(function(){
	$("#img").animate({width: "200px"},1500);
});

In the above code:

- When the ‘Large’ button is clicked, the image size is increased by 30% with a speed of 1500 ms. The first parameter in the animate() function is CSS property and the second parameter is the number determining how long the animation will run.

- When the ‘Small’ button is clicked, the image size is fixed to be 200px. 1500 is the time for the animation to ru in millisecond.

Similarly, for DIV.

Here is the HTML code with div and buttons:

<div class="content">
	My Div
</div>
<br />
 
<button>Large</button>
<button>Small</button>

Here is the jQuery code to animated the div:

$("#large2").click(function(){
	$(".content").animate({width: "50%"},1500);
});
 
$("#small2").click(function(){
	$(".content").animate({width: "300px"},1500);
});

- When the ‘Large’ button is clicked, the div is expanded to 50% of its width.
- When the ‘Small’ button is clicked, the div is fixed to 300px of width.
- 1500 is the time for the animation to run. You can change it according to you need and wish.

VIEW DEMO

Cheers,