[Study Notes] animations and effects in jQuery

1. Basic results

The matching element increases from the upper left corner to the upper left corner.

① Hide Elements

In addition to setting display: none for matching elements, you can use the following functions:

Hide (speed, [callback]) Return Value: jQuery parameter-speed: String (slow, normal, fast) of one of the three booking speeds or Number of milliseconds of animation duration callback: the function executed when the animation is completed. Each matching element is executed once.

Slow = 600 milliseconds normal = 400 milliseconds fast = 200 milliseconds

Hide all matching elements with an elegant animation, and trigger a callback function after the hiding is complete.

② Display element

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

③ Alternate display and hide

Toggle (speed, [callback]) switches the visible state of matching elements with an elegant animation. The original visible state is switched to invisible, and the original invisible state is switched to visible state.

<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. sliding effect

① Scale up

SlideUp (speed, [callback]) hides the elements up in a height change mode, and triggers a callback function after the hiding is complete.

② Show down the effect

SlideDown (speed, [callback]) displays the elements downward by changing the height, and triggers a callback function after the display is complete.

③ Alternate Scaling Effect

SlideToggle (speed, [callback]) switches the mode of Matching Element height to change the visible state. The original visible switch is invisible, and the original invisible switch is visible.

$ ("# Slideup1"). click (function () {$ ("#1"). slideUp (700 )});

$ ("# Slidedown2"). click (function () {$ ("#1"). slideDown (700 )});

$ ("# Slidetoggle"). click (function () {$ ("#1"). slideToggle (700 )});

 

3. Fade-in and fade-out effect

Display and hide elements by controlling the opacity of matching elements

① Fade-in effect

FadeIn (speed, [callback]) Gradually shows matching elements through opacity changes

$ ("# Fadein"). click (function () {$ ("#1"). fadeIn ("slow ")});

② Fade out Effect

FadeOut (speed, [callback]) Gradually hides matching elements with changes in opacity.

③ Custom opacity

The final result of Fade-in or fade-out is custom transparency.

FadeTo (speed, opacity, [callback]) the value range of opacity is 0 ~ Between 1

 

4. Custom Animation Effects

① Custom Animation

Animate (params, duration, [easing], [callback]) Return Value: jQuery parameter-params: A json object containing CSS style settings, this object determines what the Matching Element looks like, such as: {height: "100%", width: "70%", fontSize: "4em", color: "white"} but the names of these style attributes are different from those of CSS. They use the camel naming method, such as fontSize, and font-size duration in CSS: similar to the speed parameters of the previous functions, it indicates the length of time when the matching element changes from the beginning to the end. The value settings are the same as those of String, Number easing: This is not clear, name of the erased effect to be used (supported by plug-ins). By default, jQuery provides linear and swing | String callback: the same as the previous one.

This function is not as simple as it looks. Pay attention to the following points: 1. since this function changes the matching element from the original look to the look set in the params parameter of the function, it must have the original look, that is, the style attribute set in params must have been set in the original format. You cannot set border but set {borderStyle: "solid", borderWidth: "1px"} 2. it is the trigger name of the style attribute mentioned above. 3. some style attributes are not supported by animate. Even if you have set them in the original style, such as background-color, backgroundColor style attributes cannot be set in params. Http://www.stylejar.com/tag/jquery

<Div id = "3" style = "width: 200px; height: 300px; border: solid 1px; position: absolute; left:-180px;">

Username: <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 shows the sliding box we often see on the web page. The box at the beginning is 20px on the left side of the browser. When the mouse slides to the top, all the boxes are displayed, when the mouse slides out of the box, only 20 PX is displayed. We can see that the style attributes in params appear in "Original style-style attributes ". In addition, for the animation effect of position change, you must first locate the element, for example, position: absolute. In this example, the stop () function is used to stop all animations 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 attribute value of the style is set to toggle, the switch between the two is performed.

② JQuery animation queue

Adds multiple animation operations for a matching element to a queue for management. This is the default setting. In this way, the animations in the queue are executed one by one in sequence.

If you do not want an animation to be executed in sequence, but want it to be executed first, you can set the animation () function as follows. This is a way of writing the animation function, it uses a json object to represent parameters other than parmas.

$ ("# Id"). animate (parmas, {queue: false, duration: 1000}). animate (parmas, {queue: false, duration: 1000 })

The above two animations will be executed at the same time, which takes 1 second, while

$ ("# Id"). animate (parmas, {duration: 1000}). animate (parmas, {duration: 1000 })

The two animations are executed one by one, which takes 2 seconds.

All the animation functions mentioned above belong to the animation queue function.

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

They can be controlled by queue control functions 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.

For example, the queue control function queue ()

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

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

 

Supplement:

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