Click here to Skip to main content
Click here to Skip to main content

Custom Animation by jQuery

, 28 Apr 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
Custom Animation by jQuery

Custom Animation by jQuery

By using the animate() function, we can create custom animation in jQuery.
 
Syntax:
animate(params, duration, easing, callback)
In this case, params contains the final properties of the object you’re animating, such as CSS properties, duration is the optional time in milliseconds that the animation should take, easing is an optional easing function (which can determine how the animation progresses), and callback is an optional callback function.

Code Source

Download source

Code Block

<html>
<head>
<title>Custom Animation by jQuery</title>
<script src="jquery-1.5.min.js"></script>
<style type="text/css">
div {text-align:center;color:#ffffff;width:125px;height:50px;border:solid 1px #564578;background-color:#00cc00;}
</style>
<script type="text/javascript">
function animator( )
{$("#d1").animate({width: "80%",height: "20%",opacity: 0.75,fontSize: "36pt",marginLeft: "0.5in",borderWidth: "15px"}, 2000 );}
function resetanimation( )
{$("#d1").animate({width: "125px",height:"50px",opacity: 1.0,fontSize: "12pt",marginLeft: "0in",borderWidth: "1px"}, 2000 );}	 
</script>
</head>
<body>
<div id="d1" önmouseover="animator()" önmouseout="resetanimation()">Custom Animation</div>
</body>
</html>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

R S Dodiya
Software Developer (Senior)
India India

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141223.1 | Last Updated 28 Apr 2011
Article Copyright 2011 by R S Dodiya
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid