jQuery animate() Method

jQuery animate() Method

SINTAX :

(selector).animate({JSON styles object},speed in milliseconds,easing,callback)

Allows the developer to implement custom animations, modifying one or more of the following parameters :

• backgroundPositionX
• backgroundPositionY
• borderWidth
• borderBottomWidth
• borderLeftWidth
• borderRightWidth
• borderTopWidth
• borderSpacing
• margin
• marginBottom
• marginLeft
• marginRight
• marginTop
• outlineWidth
• padding
• paddingBottom
• paddingLeft
• paddingRight
• paddingTop
• height
• width
• maxHeight
• maxWidth
• minHeight
• minWidth
• fontSize
• bottom
• left
• right
• top
• letterSpacing
• wordSpacing
• lineHeight
• textIndent

The optional “EASING” parameter sets the speed of the animation as follows:

• “swing” – slower at the beginning and at the end,  faster in the middle;
• “linear” – constant speed of animation

Accepts a CALLBACK to trigger a function AFTER the animation is done.

SAMPLE CODE :

$(document).ready(function(){
   $(“input[type=button]“).click(function(){
      $(“div”)

          .animate({right:’10px’,opacity:’0.1′,fontSize:’3em’,top:’100px’},2000,”swing”)
         .animate({left:’250px’,opacity:’0.9′,fontSize:’1em’,top:’200px’},2000,”swing”)
         .animate({left:’350px’,opacity:’0.3′,fontSize:’2em’,top:’50px’},2000,”swing”);
   });
});

<input type=”button” value=”Launch Animation” />

<div style=”background: #C0C0C0; height: 200px; width: 200px; position: absolute; padding: 10px 10px 10px 10px;”>LEARNING JQUERY ANIMATE</div>

That’s all: enjoy HTML5!!!

by carmel schvartzman

עריכה: כרמל שוורצמן

Category: jQuery Effects