Second, animation
1 show () method and Hide () method
Copy Code code as follows:
$ ("selector"). Show ()
Restore element Default or set display properties from Display:none
$ ("selector"). Hide ()
Sets the display style of the element to none, equal to $ ("selector"). CSS ("display", "none")
(Note: After passing parameters, the. Show () and. Hide () methods animate the Width,height and transparency properties of the element at the same time; the incoming parameter controls the explicit speed, in milliseconds, such as. Show (600), or Fast,normal,slow, Fast is 200 milliseconds, normal is 400 milliseconds, slow is 600 milliseconds
2 FadeIn () method and Fadeout () method
Copy Code code as follows:
$ ("selector"). FadeIn ()
Control transparency from Display:none to full display within a specified time
$ ("selector"). Fadeout ()
Control transparency reduced to display:none within a specified time;
3 Slideup () method and Slidedown () method
Copy Code code as follows:
$ ("selector"). Slideup ()
The control element height is shortened from bottom to display:none within the specified time;
$ ("selector"). Slidedown ()
Control element height extends from Display:none to full height within a specified time
4 Custom Animation Method Animate ()
Copy Code code as follows:
$ ("selector"). Animate (Params,speed,callback);
Params: A mapping containing style attributes and values, such as {property1: "value1", Property2: "Value2",...}
Speed: Speed parameter, optional
Callback: The parameters that are executed when the animation completes (that is, the callback function), optional
Common examples of animations
Copy Code code as follows:
<script>
Examples of custom animations
$ (function () {
$ ("selector"). Click (function () {
$ (this). Animate ({left: "500px"},3000); Selector 3 seconds to the right to move 500px
});
})
</script>
Copy Code code as follows:
<script>
An example of a cumulative, tired animation
$ (function () {
$ ("selector"). Click (function () {
$ (this). Animate ({left: "+=500px"},3000); Add 500px to current position when the Click event is triggered continuously
});
})
</script>
<script>
Examples of multiple animations
$ (function () {
$ ("selector"). Click (function () {
$ (this). Animate ({left: "500px", Top: "300px", Height: "+=100px"},3000); Move 30 degrees to the right and increase the height
});
})
</script>
<script>
Example of performing multiple animations sequentially
$ (function () {
$ ("selector"). Click (function () {
$ (this). Animate ({left: ' 500px '},3000). Animate ({top: "300px"},3000); Animation queues
});
})
</script>
5 Animation callback function
Because the CSS () method is not added to the animation queue, it is executed immediately. If you want to change the selector CSS at the end of the animation, you need to use the callback function
Cases:
Copy Code code as follows:
<script>
$ ("selector"). Click (function () {
$ (this). Animate ({property1: "value1"},time). Animate ({property2: "value2"},time,function () {
$ (this). CSS ("Property3", "value3"); The CSS () method joins the animation queue with the callback function
});
})
</script>
(Note: The animation callback function applies to all jquery animation effect methods)
6 Stop animation and judge whether it is in animation state
$ ("selector"). Stop ()
Ends the current animation, such as the next animation in the queue, immediately executes the next animation, format $ ("selector"). Stop ([clearqueue][,gotoend])
Toggle Animation Example:
Copy Code code as follows:
<script>
$ ("selector"). Hover (function () {
$ (this). Stop (). Animate ();
},function () {
$ (this). Stop (). Animate ();
})
</script>
When the Clearqueue parameter is set to True, the current element is emptied of the next animated queue that has not been completed
Cases:
Copy Code code as follows:
<script>
$ ("selector"). Hover (function () {
$ (this). Stop (true). Animate (). Animate ()//So trigger the cursor to move out of the event, skip the subsequent animation queue, and avoid performing the second animation of this queue
},function () {
$ (this). Stop (true). Animate (). Animate ()
})
</script>
When the Gotoend parameter is set to True, the animation that is being performed can be reached directly to the end of the state
Is (": animated")
Determines whether an element is animated and can be used to prevent animation from accumulating
Cases:
Copy Code code as follows:
<script>
if (!$ ("selector"). Is (": Animated")) {//To determine if an element is in an animated state
If you are not currently animating, add a new animation
}
</script>
7 Other animation methods
3 animated methods dedicated to interaction: Toggle (Speed,[callback]); Slidetoggle (Speed,[callback]); Fadeto (Speed,opacity,[callback])
Copy Code code as follows:
$ ("selector"). Toggle ()
Toggles the visible state of an element, such as element shadowing, to be visible and vice versa
$ ("selector"). Slidetoggle ()
Toggle the visibility of an element by changing the height
$ ("selector"). Fadeto ()
Adjusts the opacity of an element incrementally to a specified value, such as $ ("selector"). Fadeto (600,0.2); Adjust content to 20% transparency at 600 millisecond speed
8 Overview of Animation methods
Copy Code code as follows:
Toggle () is used instead of hide () and show ()
Slidetoggle () is used instead of slideup () and Slidedown ()
Animate () can replace all animation methods
