jquery animation and special Effects example analysis _jquery

This article analyzes the use of jquery animation and special effects. Share to everyone for your reference. The specific analysis is as follows:

Show and Hide

Show (Spped,[callback]) and hide (Spped,[callback])
Speed optional filling slow, normal, fast, the corresponding speed is 600ms, 400ms, 200ms respectively. You can also fill in milliseconds directly, the callback function is a callback function, and the function is called after the action completes.

$ ("img"). Show (3000,function () { 
   $ (this). CSS ("border", "solid 1px #ccc"); 

Toggle () function, no parameter format, toggle between display and hide
Toggle (True Orfalse) with a Boolean form that displays the element when true, otherwise, hides the element
Toggle (Speed,[callback]) is similar to the show () function usage

Sliding

Slidedown (Spped,[callback]) and Slideup (Spped,[callback))
is essentially changing the height of the element.
Slidetoglge (Spped,[callback]) Toggle Slide effect

Fade in

FadeIn (Spped,[callback]) and fadeout (Spped,[callback))
is essentially a change in the transparency of the element
Fadeto (Spped,opacity,[callback]); Opacity is transparent, between 0 and 1, and 1 is fully transparent

Custom Animation

Animate (Params,[duration],[easing],[callback])
Params represents the property styles and collections that are used for animation effects
Duration represents three default speed characters, slow, normal, fast, or custom number of milliseconds
Easing is used by animation plug-ins to control the performance of animations, usually with linear and swing character values
Callback after the animation is complete, the callback function executed

$ (this). Animate ( 
   {   width: "20%", 
       Height: "70px"    
    },//object notation, which is commonly used in jquery in this format to pass parameter 
   3000, 
   function () { 
   $ (this). CSS ("border": "Solid 3px #666") 
   . html ("Getting bigger!! "); 
   } 
);/ /pass the parameter, must use the Camel method to write the attribute name, if font-size must be written fontsize

$ ("P"). Animate ( 
   {left: "20px", Top 
    : "70px"  
   }, 
   3000 
)//move 20 pixels to the right, move 70 pixels down

Stop ([Clearqueue],[gotoend])
Clearqueue is a Boolean value that indicates whether the animation being executed is stopped
Gotoend is a Boolean value that indicates whether the animation being executed is completed immediately
Delay (Duration,[queuename])
Duration is a deferred time value
QueueName represents a queue noun, that is, an animated queue

$ ("A:eq (0)"). Click (function () { 
   $ ("img"). Slidetoggle (3000); 
});//"Pull the curtains" to toggle the picture 
$ ("A:eq (1)"). Click ( function () { 
   $ ("img"). Stop (); 
})//stops an executing animation 
$ ("A:eq (2)"). Click (function () { 
   $ ("img"). Delay (2000 ) 
   . Slidetoggle (3000); 
Delay Switch Picture

I hope this article will help you with your jquery programming.