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,

You can easily create stunning and very effective image slideshow with the jQuery Cycle Plugin. You don’t need to write long and difficult programming code. Just a few lines of code will be enough.

View Demo | Download Code

You need to have jQuery library and the jQuery Cycle plugin.

Download jQuery Library | Download jQuery Cycle Plugin

The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more.

The Cycle Plugin provides many options for customizing your slideshow. The default option values can be overridden by passing an option object to the cycle method.

Here is the list of options

There are many effects that can be used with jQuery Cycle Plugin. You can find them all here. I have used some effects and created a demo.

View Demo | Download Code