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.
I am ending the things here. I hope this article will be helpful for all.