jQuery study notes jQuery animation_jquery

1. System predefined animation functions

1. Show and hide functions
show(); //Display elements (increase width, height, and opacity at the same time)
hide (); //Hide element
Execute hide() to hide the interface element, which is equivalent to display:none in the css style.

We can also add parameters to the function, as follows:
show("slow");
In addition to the slow value, it can also be set to normal and fast, which represent the time of 600, 400, and 200 milliseconds respectively

We can also add specific time values. The details are as follows:

slow(1000);
This represents the time interval when the element is completely displayed is 1000 milliseconds

2. Opacity function
fadeIn();// Gradually display the element (only increase the opacity)
fadeOut(); // Gradually fade the element

3. Height and width function
slideDown(); // Gradually increase the height of the element (only increase the element height)
slideUp(); // Gradually shorten the height of the element

2. Custom animation function

animate(params,speed,callback);
params: The value is a mapping between a style attribute and the value
speed: speed
callback: the execution function when the animation is completed

The value of the style attribute of params can be multiple attributes, It can also be a value of cumulative increase and decrease
Example:


1. Stop element animation
stop();
End the currently executed animation and immediately execute the animation defined below

2. Determine whether it is in animation state
is(" :animate")

3. Other animation functions
toggle(speed,callback);//Switch element status (height, width, opacity) immediately, if hidden, switch to display, if displayed Toggle hidden
sildeToggle(speed,callback);//Change height mode to switch element status
fadeto(speed,opacity,callback);Switch to the specified opacity value