Animation in jQuery-JS Tutorial-php.cn

Animation in jQuery

炎欲天舞

Release： 2017-08-04 15:26:28

Original

1128 people have browsed it

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”>

Copy after login

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!