Animation effects using JQuery
Animation in JQuery is somehow good and it supports basic animation which is effective in case where you want to apply quick and hassle free animation effects. JQuery supports animation methods which can be attached directly to any control very quickly.
Animation in JQuery
JQuery supports animation which can be applied on any HTML/ASPX control. There are three main animation effects which are supported here:
.slideDown()
.slideUp()
.slideToggle()The slide Down Effect
This effect when applied on any control, shows a sliding down effect. We can set the duration of the slide and also define callback function to be executed when animation completes.
synatx -> .slideDown(duration,callback);
duration - in miliseconds, higher value shows slower animation effect. You can also pass 'fast' or 'slow' strings as duration which works between 200 to 600 miliseconds. The default duration is 400 miliseconds which is applied automatically if duration parameter is omitted.
Example
<div id="divImage">
Click here to see slide down animation
</div>
<img id="sample" src="Image.png" alt="" width="100" height="123" />
<script language='javascript'>
$('#divImage').click
(
function()
{
$('#sample').slideDown('slow', function()
{
alert('Animation completed');
}
);
}
);
</script>
The callback function is called only after animation is completed.The slide Up Effect
As you have seen and noticed the slide Down effect, slide Up effect works exactly in reverse of slide Down effect. I think this section is self explanatory to I am leaving this part to the reader to experiment with it.The slide Toggle Effect
As the name suggests, slide Toggle effect works both ways, slide Up and Down respectively. This is useful when you want to slide Down when user clicks the control first, and on next click it's slide Up.
Example
<div id="divImage">
Click here to see slide down animation
</div>
<img id="sample" src="Image.png" alt="" width="100" height="123" />
<script language='javascript'>
$('#divImage').click
(
function()
{
$('#sample').slideToggle('slow', function()
{
alert('Animation completed');
}
);
}
);
</script>
Please note that the initial effect takes place depending of the initial value of visibility of the control. If the control is initially visible, it will slide Up and if the control is initially hidden, it will be slide Down.Additional Notes
The JQuery effects can be turned off by setting following property. This property when set to true, set the duration equal to 0.
jQuery.fx.off = true;