Application of jquery animate

Let's take a look at the official introduction to this method.

Official Address http://api.jquery.com/animate/

• . Animate (properties, [duration,] [easing,] [complete])Version added: 1.0

  PropertiesA map of CSS properties that the animation will move toward.

  DurationA string or number determining how long the animation will run.

  EasingA string indicating which easing function to use for the transition.

  CompleteA function to call once the animation is complete.

• . Animate (properties, options) Version added: 1.0

  PropertiesA map of CSS properties that the animation will move toward.

  OptionsA map of additional options to pass to the method. Supported keys:

  • Duration: A string or number determining how long the animation will run. (default value: "normal") a string ("slow", "normal", or "fast") with one of the three predefined speeds, or a millisecond value indicating the animation duration (for example, 1000)
  • Easing: A string indicating which easing function to use for the transition. (default value: "Swing") Name of the erased effect to be used (required by the plug-in ). by default, jquery provides "linear" and "Swing ".
  • Complete: A function to call once the animation is complete. Function executed when the animation is completed
  • Step: A function to be called after each step of the animation. Function executed in each step of the animation
  • Queue: A boolean indicating whether to place the animation in the effects queue. IfFalse, The animation will begin immediately. (default value: True) if it is set to false, this animation will not enter the animation Queue (added in jquery 1.2)
  • Specialeasing: A map of one or more of the CSS Properties
    Defined by the properties argument and their corresponding easing
    Functions (added 1.4). FromStylesIng of one or more CSS attributes of parameters and their corresponding easing Functions

Example

 <!  Doctype html  >  
  <  Html  >  
  <  Head  >  
 <  Meta  HTTP-equiv  = "Content-Type"  Content  = "Text/html; charsets = UTF-8"     />  
  <  Title  >  Untitled document  </  Title  >  
 <  Style  >  
Div  {  Margin  :  3px  ;  Width  :  40px  ; Height  :  40px  ;  Background-color  :  # FCC  ;  Display  :  None  ; Text-align  :  Right  ;     }  
  </  Style  >  
  <  Script  SRC = "Http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"  > </  Script  >  

  </  Head  >  

  <  Body  >  
  <  Div  ID = "T1"  >  Hey  </  Div  >  
  <  Script  >  
  Function  Runit (){
$ (  "  # T1 "  ). Animate ({width:  '  80%  '  }, "3000 ",  "  Swing  "  ,  Function  () {$ ( "  # T1  "  Pai.html ($ (  "  # T1  "  ). Width ());});
$ (  '  # T1  '  ). Animate ({width: '  50%  '  , Opacity :.  5  }, {Duration:  '  3000  '  , Easing:  "  Swing "  ,
Step:  Function  (Now, FX ){
  VaR  Data  =  FX. ELEM. ID  +     ' ---  '     +  FX. Prop  +     '  :  '     + Now;
$ (  '  # T1  '  Pai.html (data );
},
Complete:  Function  (){
$ (  '  # T1  '  ). Append ( '  -- | -- Complete -- | --  '  );
}
});
}
Runit ();
  </  Script  >  
  </  Body  >  
  </  Html  >