Click here to Skip to main content
12,763,796 members (38,071 online)
Click here to Skip to main content
Add your own
alternative version


3 bookmarked
Posted 27 Apr 2011

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.

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

<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;}
<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 );}	 
<div id="d1" önmouseover="animator()" önmouseout="resetanimation()">Custom Animation</div>


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


About the Author

R S Dodiya
Software Developer (Senior)
India India

You may also be interested in...


Comments and Discussions

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