Jquery-animate method, a album demo written a long time ago

Note: You need to check the browser of a later version. Chrome uses HTML5 labels and css3 styles in several places.

In this demo, I used the animate method to write a dynamic sliding effect, which is actually quite interesting.

Animate method:

The key to this function is to specify the animation form and result style attributes, and each object has a changeable style attribute, such as width and height. For a basic function, we also need to learn its internal attributes to make comprehensive use of efficient and good interaction effects.

Params: A set of style attributes and their values that serve as animation attributes and final values.

Speed: A string ("slow", "normal", or "fast") with one of the three predefined speeds, or a millisecond value (for example, 1000) indicating the animation duration)

Easing: Name of the erased effect to be used (supported by plug-ins). By default, jquery provides "linear" and "Swing ".

FN: The function executed when the animation is completed. Each element is executed once.

Let's look at an example:

 <!  Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  >  < Html  Xmlns  = "Http://www.w3.org/1999/xhtml"   >  <  Head  >      <  Title  > Untitled page </  Title  >      <  Style  Type = "Text/CSS"  >  Body  {  Position  :  Relative  ;  }  . De  {  Width :  100px  ;  Height  :  100px  ;  Background  :  Green  ;  Position :  Absolute  ;  }      </  Style  >      <  Script  Type  = "Text/JavaScript"  SRC  = "Jquery-1.6.4.min.js"  > </  Script >      <  Script  Type  = "Text/JavaScript"  >  $ (  Function  () {$ (  "  . DL  "  ). Click ( Function  () {$ (  "  . De  "  ). Animate ({top:  "  + 40px  "  },  1000 );});});  </  Script  >  </  Head  >  <  Body  >      <  A  Href  = "#"  Class  = "DL"  > Content </  A  >      <  Div  Class  = "De"  > </  Div  >  </  Body  >  </  Html  > 

Params:CodeIs the attribute of the style and value, such as {top: "+ 40 "}

Speed: In the above Code, this parameter is 1000mm.

What if we still need an action after the animation is executed? So we thought about the callback function. Let's look at the following example. After the animation is completed, a is displayed.

 <!  Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  >  <  Html  Xmlns  = "Http://www.w3.org/1999/xhtml"   >  <  Head >      <  Title  > Untitled page </  Title  >      <  Style  Type  = "Text/CSS"  >  Body  {  Position :  Relative  ;  }  . De  {  Width  :  100px  ;  Height  : 100px  ;  Background  :  Green  ;  Position  :  Absolute  ;  }      </ Style  >      <  Script  Type  = "Text/JavaScript"  SRC  = "Jquery-1.6.4.min.js"  > </  Script  >      <  Script  Type  = "Text/JavaScript"  > $ (  Function  () {$ (  "  . DL  "  ). Click (  Function  () {$ (  "  . De "  ). Animate ({top:  "  + 40px  "  },  1000  ,  Function  () {Alert (  " A  "  );});});});  </  Script  >  </  Head  >  <  Body  >      <  A  Href  = "#" Class  = "DL"  > Content </  A  >      <  Div  Class  = "De"  > </  Div  >  </  Body  >  </ Html  > 

This is the charm of the jquery-animate method. Keeping in mind the four attributes, you can make various interactions by combining them with styles.