Animation and effects in the "Learning notes" jquery

1. Basic effects

Match elements begin to thicken or shrink to the upper left corner and become smaller from the upper left corner

① hidden elements

In addition to setting the display:none of a matching element, you can use the following function

Hide (Speed,[callback]) return value: JQuery parameter-speed: Three A string of one of the booking speeds (slow,normal,fast) or the number of milliseconds that the animation is long is callback: The function that executes when the animation is completed, once for each matching element

slow=600 ms normal=400 ms fast=200 ms

Hides all matching elements in an elegant animation, and optionally triggers a callback function after the hide is complete.

② Display elements

Show (Speed,[callback]) displays all matching elements in an elegant animation and optionally triggers a callback function after the display is complete.

③ alternating display hidden

Toggle (Speed,[callback]) with graceful animation to toggle the visible state of the matching elements, the original visible switch is not visible, the original is not visible switch to visible.

<input type= "button" id= "Hide1" value= "Hide ()"/>

<input type= "button" id= "Show1" value= "Show ()"/>

<input type= "button" id= "Toggle1" value= "toggle ()"/>

<div id= "1" style= "width:100px; height:100px; "></div>

$ (function () {

$ ("#hide1"). Click (function () {$ ("#1"). Hide (700)});

$ ("#show1"). Click (function () {$ ("#1"). Show (700)});

$ ("#toggle1"). Click (function () {$ ("#1"). Toggle (700)});

})

2. Slide effect

① upward Shrinkage effect

Slideup (Speed,[callback]) hides the element up through a height change and optionally triggers a callback function after the hide is complete.

② downward unfold effect

Slidedown (Speed,[callback]) displays the element downward by a height change and optionally triggers a callback function after the display is complete.

③ Alternating scaling effect

Slidetoggle (Speed,[callback]) toggle the height of the matching element to change the visible state, the original visible switch is not visible, the original is not visible switch to visible.

$ ("#slideup1"). Click (function () {$ ("#1"). Slideup (700)});

$ ("#slidedown2"). Click (function () {$ ("#1"). Slidedown (700)});

$ ("#slidetoggle"). Click (function () {$ ("#1"). Slidetoggle (700)});

3. Fade effect

Display and hide elements by controlling the opacity of matching elements

① fade-in effect

FadeIn (Speed,[callback]) gradually reveals the matching elements through the change in opacity

$ ("#fadein"). Click (function () {$ ("#1"). Fadein ("Slow")});

② Fade Out effect

FadeOut (Speed,[callback]) gradually hides the matching elements by changing the opacity

③ Custom Opacity

Fade in or fade out the final result for custom transparency

FadeTo (Speed,opacity,[callback]) opacity is a range of 0~1

4. Custom animation effects

① Custom Animations

Animate (Params,duration,[easing],[callback]) return value: JQuery parameter-params: A JSON object that contains a CSS style setting that determines what the matching element will look like: {   Height: "100%", Width: "70%", FontSize: "4em", Color: "White"} but the names of these style properties are different from those of CSS, and they use camel nomenclature like fontSize and in CSS Font-size Duration: The speed parameter, similar to the previous functions, indicates the length of the match element from the beginning to the end of the change, and the setting of its value is the same String,number easing: this is not quite clear, the name of the erase effect to use (requires plug-in support), Default jquery provides linear and swing| String callback: the same as before

This function is not as simple as it seems, there are a few points to note 1. Since the function is to change the matching element from the original to the params parameter set in the function, then it must have the original appearance, that is, the style attributes set in the params must have been set in the original appearance, The border cannot have been set, but in the params this setting {borderStyle: "solid", BorderWidth: "1px"} 2. The camel nomenclature of the style attributes mentioned above 3. Some style properties animate is not supported, even if   You have set it up in the same way, such as Background-color, and you cannot assume that the BackgroundColor style attribute is set in the params. Http://www.stylejar.com/tag/jquery

<div id= "3" style= "width:200px; height:300px; Border:solid 1px; Position:absolute; left:-180px; " >

User name: <input type= "text"/><br/>

Password: <input type= "Password"/></div>

$ (function () {

$ ("#3"). MouseOver (function () {$ (this). Stop (). Animate ({left: "0px"})

}). mouseout (function () {$ (this). Stop (). Animate ({left: " -180px"},3000)})

})

Http://blog.sina.com.cn/s/blog_6168f0090100el4p.html

The above realized we often see on the Web page of the effect of the sliding box, the beginning of the box in the left side of the browser to reveal 20px, when the mouse slide to the top of the box all exposed, the mouse out of the box when the box only exposed 20px, we see the params in the style attributes appear in the "original look in the-style attribute. In addition, for the animation effect of the position change, the element should be positioned first, such as the position:absolute of the place. Another thing to note in this example is the Stop () function: Stops all animations that are running on the specified element. Http://www.w3school.com.cn/jquery/effect_stop.asp

$ ("#3"). MouseOver (function () {$ (this). Stop (). Animate ({height: "Toggle", "width:" Toggle "})})

If the value of the above style attribute is set to toggle, it is switched between Yes and no

②jquery Animation queue

To manage multiple animation operations on a matching element in one queue, this is the default setting so that the animations in the queue are executed one at a

If you do not want an animation to execute sequentially, but you want it to be executed first, you can set the animate () function as follows, which is a notation for the animate function, which uses a JSON object to represent the parameters other than Parmas.

$ ("#id"). Animate (parmas,{queue:false,duration:1000}). Animate (parmas,{queue:false,duration:1000})

The two animations will be executed at the same time, with a total of 1 seconds, while

$ ("#id"). Animate (parmas,{duration:1000}). Animate (parmas,{duration:1000})

These two animations will be executed one at a time, taking 2 seconds to complete.

All of the animation functions described above belong to the animation queue function

Http://hi.baidu.com/chougood/blog/item/350421338b4156f31a4cff11.html

They can be controlled by the queue control function http://www.w3school.com.cn/jquery/jquery_ref_queue.asp

Of course, the queue control function can not only control the animation queue function, but also control other common functions

such as the queue control function of the queue () function

Http://shawphy.com/2009/04/how-to-use-queue-and-dequeue.html

http://mrthink.net/jqueryapi-queue-dequeue/

Tween

Delay (Duration,[queuename]) http://shawphy.com/2010/11/jquery-delay.html