Feb
22

Basic jQuery Tutorial: Animate div and image

By Mukesh Chapagain  //  jQuery  //  7 Comments

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,

Related posts:

jqueryBest Beginner Tutorial For jQuery magMagnifying Image using jQuery jQuery: Create Stunning Slideshow with Cycle Plugin photoalbum2Creating a Simple Photo Album using jQuery
Tags: , , , , , ,

Author: Mukesh Chapagain

Passionate about Web Technology and Web development. Loves Blogging. Keenly interested in Open Source Technology/Software/Framework.

Mukesh Chapagain has written 20 articles for us.

7 Comments to “Basic jQuery Tutorial: Animate div and image”

Leave a comment

ThemeForest
Recommend on Google

Sign up for our mailing list.

Categories

Recent Comments