Using the jQuery Library`s Animation Effects - Developing customized animations with jQuery's animate() method
(Page 4 of 4 )
Despite the number of methods bundled with jQuery for performing neat animations on one or more elements included in a web document, there's an additional one, called "animate()," which permits you to build customized visual effects very simply.
Essentially, all that this method does is create a smooth transition between the CSS styles assigned to the targeted element and the ones passed as arguments to its constructor. To dissipate any possible doubts about how the "animate()" method works, please study the following code sample. It shows how to modify the width and opacity of a div by using this method:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Basic example on using jQuery with animate() method</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h1{
font: 24px bold Arial, Helvetica, sans-serif;
color:#000;
}
div{
width: 200px;
padding: 10px;
background: #ffc;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(){
$("div").animate({
width: "500px",
opacity: 0.2,
borderWidth: "10px"
}, 1500 );
return false;
});
});
</script>
</head>
<body>
<h1>Basic example on using jQuery with animate() method</h1>
<a href="#">Click to hide the DIV...</a>
<div>
Content of the DIV goes here... Content of the DIV goes here... Content of the DIV goes here... Content of the DIV goes here...
</div>
</body>
</html>
If you try this hands-on example on your own browser and click on the above link, the selected div will expand its width and its opacity will change to a value of 0,2. Of course, this is only a basic example of how to use the "animate()" method, but it should give you an appropriate idea of its potential for creating more complex animation effects.
And with this concluding example, I'm finishing this quick overview on using the most important methods provided by the jQuery JavaScript framework. As always, feel free to use all of the code samples included in this tutorial so you can learn how to get the most of this powerful library.
Final thoughts
It's hard to believe, but we've come to the end of this series. Hopefully, the overall experience has been educational and also fun. You learned how to utilize the friendly programming interface of jQuery to create solid JavaScript applications in a painless way.
From handing events and manipulating the elements of a web document, to building Ajax-based applications and eye-popping animation effects, the library provides both developers and designers with an impressive arsenal of tools that are really worth trying out.
See you in the next web development tutorial!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
