Implementing Effects in JQuery

In previous article, we looked into events of JQuery. In this article, we will cover Effects and its implementation. JQuery provides lot of effects to improve the look and feel of the page. It supports fade in, fade out, slide etc. JQuery provide built-in functions to support these effects. Before looking into these methods, we will cover simple way to add effects to the page using css() , addClass() and removeClass() functions in below HTML:

<html>
  <head>
    <title>JQuery Sample HTML Page</title>
<script src="jquery-1.4.2.min.js" type="text/javascript">
</script>
<style>
.highlight
{
color:blue; 
}
</style>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$('#myButton').toggle(
function(){$(this).addClass('highlight');},
function(){$(this).removeClass('highlight');}
);
$('#myButton').click(function() {$(this).css('height','200');});
});
</script>
  </head>
  <body>
<input type="button" value="Click Me" id="myButton"/>
  </body>
</html>

We are using addClass()  and removeClass() for adding and removing css class. In the same way, we are using css() function to change height property. To get a css property value, we can use below syntax:

$(this).css('prop-name');

To set multiple properties in single line:

$(this).css(prop-name1 : 'val1', prop-name2: 'val2',....);

By using above functions, we can create basic animation effects. Now, we will look into JQuery Effects functions. The basic functions are hide() and show() and accepts two parameters. One is to control speed of hiding/showing and other is callback to be called on finishing hide/show. Speed can be slow, normal or fast as shown below:

$('#myButton').click(function(){$(this).hide('slow',function(){alert('hide complete.');});});

Slow completes hide/show in 0.6 seconds, Fast in 0.2 seconds and Normal in 0.4 seconds.

In the same way, we can use fadeIn() and fadeOut() functions to hide/show elements by managing opacity of it as shown below:

$('#myButton').click(function(){$(this).fadeOut('fast',function(){alert('Fading complete.');});});

We can use fadeTo(duration to run animation, opacity[0-1],callback to be called) for fading to certain opacity. Use slideUp() and slideDown() for sliding effect.

We will end up the session with custom animation using .animate().  This function will work using css properties. It accepts four parameters and it does:
  • 1st parameter to set CSS properties for animation.
  • 2nd parameter to set duration of animation. It can be slow, fast.
  • 3rd parameter to provide easing function for animation. It can be 'swing' or 'linear'
  • 4th parameter to provide callback on animation complete.
An example of it is:
 
$(function(){$('#myButton').click(function() {
  $(this).animate({left: 650, height: 380}, 'slow','linear',function(){alert('animation completed.');});
});
});
 
We can apply multiple effects using .animate() function. 
 
For complete list of effects, refer http://api.jquery.com/category/effects/
 
I am ending the things here. I hope this article will be helpful for all.