search

Home >Web Front-end >JS Tutorial >Animation in jQuery

Animation in jQuery

炎欲天舞
炎欲天舞Original
2017-08-04 15:26:281103browse

1.show() method and hide() method

Control the display state of the element - appearing and hiding, while changing the height, width and opacity of the content, until this point Three attribute values ​​are 100% or 0 (display: none). Equivalent to display in css: block/inline/none;

Note: Using jQuery to create animation effects requires the standard mode, otherwise it may cause animation jitter. The standard mode requires that the file header contains the following DTD definition: 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://wslideww.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Parameters: fast--200ms, normal--400ms, slow--600ms, specified number (ms); the parameter is not a number plus quotation marks, the parameter It’s just a number, so don’t add it.

(1) fadeIn() method and fadeOut() method

Only change the opacity of the element - increase transparency and reduce transparency until the element disappears completely (display: none)

(2) slideUp() method and slideDown() method

Only change the height of the element - collapse and expand

2.animate() method —Custom animation

left attribute: This attribute defines the positioned elementleftmargin boundary and its containing block Offset between left borders.

Note: If the value of the "position" attribute is "static", then setting the "left" attribute will have no effect.

Format: animate(params,speed,callback)

(1) The first parameter params: a mapping containing style attributes and values, example: {property: "value1", property: "value1". . . . }

(2) The second parameter speed: speed parameter

(3) The third parameter callback: callback function, the action performed when the animation is completed

Supplement: ① The value of the attribute can be accumulated and reduced. Animate ({left: "+= 500px"})

② Set different attributes to perform multiple animations at the same time, or dismantle the code to execute ## in order

#       ③The animate() method all operates on the same jQuery object, and multiple operations can be implemented using chain writing

3. Animation callback function

Animation queue: animation effects are executed in sequence

Note: Only animation methods can be added to the animation queue. Non-animation methods will not be added to the animation queue, but will be executed immediately. You can write non-animation methods Implement queuing of non-animated methods in the callback function.

The above is the detailed content of Animation in jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：4 types of Jquery Ajax typeNext article：4 types of Jquery Ajax type

Related articles

See more