Sharp jQuery key points (3) Events and animations in jQuery (Part 2: animation) _ jquery

Key points in sharp jQuery (3) Events and animations in jQuery (Part II: animation) II. Animation
1. show () and hide () Methods

The Code is as follows:

$ ("Selector"). show ()
Restore the default or set display attribute of an element from display: none
$ ("Selector"). hide ()
Set the display style of the element to none, equal to $ ("selector" ).css ("display", "none ")

(Note: After passing in parameters ,. show () and. the hide () method simultaneously changes the width, height, and transparency attributes of the element. The input parameter controls the explicit/hidden speed, in milliseconds, for example. show (600). You can also set fast, normal, slow, fast to 200 milliseconds, normal to 400 milliseconds, and slow to 600 milliseconds)
2 fadeIn () method and fadeOut () method

The Code is as follows:

$ ("Selector"). fadeIn ()
The control transparency is increased from display: none to full display within the specified time.
$ ("Selector"). fadeOut ()
The control transparency is reduced to display: none within the specified time;

3. slideUp () and slideDown () Methods

The Code is as follows:

$ ("Selector"). slideUp ()
The height of the control element is reduced from bottom to top to display: none within the specified time;
$ ("Selector"). slideDown ()
The height of the control element extends from display: none to the complete height within the specified time.

4. Custom Animation method animate ()

The Code is as follows:

$ ("Selector"). animate (params, speed, callback );
Params: A ing containing style attributes and values, for example, {property1: "value1", property2: "value2 ",...}
Speed: The speed parameter. Optional.
Callback: The parameter (that is, the callback function) That is executed when the animation is completed. Optional.

Common animation examples

The Code is as follows:

Script
// Example of Custom Animation
$ (Function (){
$ ("Selector"). click (function (){
$ (This). animate ({left: "500px"}, 3000); // selector moves 500px to the right in 3 seconds
});
})
Script

The Code is as follows:

Script
// Example of accumulative and progressive Animation
$ (Function (){
$ ("Selector"). click (function (){
$ (This). animate ({left: "+ = 500px"}, 3000); // when the click event is triggered consecutively, PX is accumulated at the current position.
});
})
Script
Script
// Multiple animation examples
$ (Function (){
$ ("Selector"). click (function (){
$ (This ). animate ({left: "500px", top: "300px", height: "+ = 100px"}, 3000); // motion 30 degrees to the right and increase the height at the same time
});
})
Script
Script
// Example of executing multiple animations in sequence
$ (Function (){
$ ("Selector"). click (function (){
$ (This). animate ({left: "500px"}, 3000). animate ({top: "300px"}, 3000); // animation queue
});
})
Script

5. animation callback function
Because the css () method is not added to the animation queue, It will be executed immediately. If you want to change the selector css at the end of the animation, you need to use the callback function.
Example:

The Code is as follows:

Script
$ ("Selector"). click (function (){
$ (This). animate ({property1: "value1"}, time). animate ({property2: "value2"}, time, function (){
Callback (this).css ("property3", "value3"); // the css () method adds the callback function to the animation queue.
});
})
Script

(Note: The animation callback function applies to all jQuery animation effects)
6. Stop the animation and determine whether it is in the animation state.
$ ("Selector"). stop ()
End the current animation. If the next animation exists in the queue, execute the next animation immediately. Format: $ ("selector"). stop ([clearQueue] [, gotoEnd])
Example of switching an animation:

The Code is as follows:

Script
$ ("Selector"). hover (function (){
$ (This). stop (). animate ();
}, Function (){
$ (This). stop (). animate ();
})
Script

When the clearQueue parameter is set to true, the animation queue that is not completed after the current element is cleared.
Example:

The Code is as follows:

Script
$ ("Selector"). hover (function (){
$ (This). stop (true). animate (). animate () // If the cursor removal event is triggered at this time, skip the animation queue to avoid executing the second animation in this queue.
}, Function (){
$ (This). stop (true). animate (). animate ()
})
Script

When the gotoEnd parameter is set to true, the animation in progress can be directly reached the end time.
Is (": animated ")
Determines whether an element is animated. It can be used to prevent animation accumulation.
Example:

The Code is as follows:

Script
If (! $ ("Selector"). is (": animated") {// determines whether the element is in the animation state.
// If no animation is currently available, add a new animation.
}
Script

7. Other animation Methods
Three animation methods specifically used for interaction: toggle (speed, [callback]); slideToggle (speed, [callback]); fadeTo (speed, opacity, [callback])

The Code is as follows:

$ ("Selector"). toggle ()
Switch the visible state of the element. If the element is hidden, switch to visible, and vice versa.
$ ("Selector"). slideToggle ()
Change element visibility through height
$ ("Selector"). fadeTo ()
Adjust the opacity of an element to the specified value progressively, such as $ ("selector"). fadeTo (600, 0.2); adjust the content to 600 transparency at a speed of 20% milliseconds

8 animation method Overview

The Code is as follows:

Toggle () is used to replace hide () and show ()
SlideToggle () is used to replace slideUp () and slideDown ()
Animate () can replace all animation Methods