jQuery animations and Events
Right, we are going to be continuing on our last tutorial on getting to know the jQuery library. In this tutorial we are going to have fun with the animations and effects that ship with the jQuery library and also learn about events. We will apply these effects on our HTML elements on our pages.
Events
Just like desktop applications, HTML pages have specific events that you can listen for. An event can be a mouse click, a page scroll, a page load, or movement of the mouse pointer. In plain JavaScript alone you can also detect these interactions. jQuery has wrapped all the native JavaScript events (such as onClick, onMouseOver, etc) in addition to new events inherent in the library. Review the API documentation on their website.
Animations
Animations are content driven, and by that I simply mean that if actions or new content is being loaded dynamically you might like to apply a subtle but noticeable effect (such as a fade in) to that content. Users nowadays expect a web 2.0 look and feel to your web applications or websites. Animation is one of those ways in which you could provide that experience and enhance interaction with your system. Beware of misusing animations though, because too much animation may become a bad thing. We don't want lags in a process do we now? And we it would not make any sense using animations where there is no necessity. "Just because you can sometimes doesn't mean you should" .
Let's get started
Okay so I've explained what events and animations are good for so now let's see what we can do. Before we start getting our hands dirty again, its worth noticing that jQuery has a few built-in animations that are commonly used. You can review all these built-in effects on the jQuery Effects API Documentation.
Alright let us start playing around with these so called effects. The following code shows a simple fade out effect on a div element when we press a button
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>jQuery Events and Effects Demo</title>
<script type="text/javascript" src="/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fadeTrigger').click(function() { //Means when we click this element :-)
$('#fadeOutDiv').fadeOut(500);
});
});
</script>
<style type="text/css">
div {
background: red;
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<button id="fadeTrigger">Click here to fade the red square out</button><br />
<div id="fadeOutDiv"> </div>
</body>
</html>
In our HTML markup we have a button and a red div right under it. When this button was clicked we saw the red square fade out of sight. As u can see on line 11; we registered a click event on the button and within that event we have a jQuery code to grab the the red square and fade it out using the built-in fadeOut() jQuery function. In case you've been wondering what the 500 is for. It is the duration (in milliseconds) that the effect will occur and in our case we chose half a second (remember we only want a noticeable but not too long effect here). Lets look at another example using a slide transition rather than our fade example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>jQuery Events and Effects Demo</title>
<script type="text/javascript" src="/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fadeTrigger').click(function() { //Means when we click this element :-)
$('#fadeOutDiv').slideUp(500);
});
});
</script>
<style type="text/css">
div {
background: red;
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<button id="fadeTrigger">Click here to fade the red square out</button><br />
<div id="fadeOutDiv"> </div>
</body>
</html>
We can go on trying different combinations of effects and animation like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>jQuery Events and Effects Demo</title>
<script type="text/javascript" src="/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#fadeOutDiv').mouseover(function() { //Means when we hover over this element :-)
$('#fadeOutDiv').slideUp(500);
});
});
</script>
<style type="text/css">
div {
background: red;
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<div id="fadeOutDiv">Hover over me to see me dissappear</div>
</body>
</html>
Conclusion
Now that we know of the different animations and events (although we just played around with few of them) that you could use. Its time you start using your imagination and build really cool user experiences. Remember to review the documentation for all the different events and animations and try them out yourself. In our next part we will look pseudo selectors
Comments