Summary of jQuery dynamic cool effect implementation_jquery

jQuery has strong advantages in creating dynamic cool effects. Here are some of the most commonly used methods summarized by the author.

1. Modify the inline CSS
jQyery provides the .css() method for us to obtain or modify the inline css
The parameters that the .css() method can receive There are two types, one is to pass it a separate style attribute and value, and the other is to pass it a mapping consisting of "property-value" pairs:
.css('property','value ');
.css({'property1':'value1','property-2':'value2'});
Generally speaking, numeric values ​​do not need to be quoted, while string values ​​do not need to be quoted. quotation marks. However, when using mapped notation, the quotes can be omitted if the property name uses camelCase DOM notation.

2. Basic hiding and showing, without animation effects
.hide()
.show()
The function of these two methods is to hide immediately Or display a set of matching elements.
3. Specify the hiding and displaying of the display speed
Based on the .hide() and .show() methods, the hiding or displaying speed can be specified. Its expression method is: .hide('speed') or .show('speed'). The value of speed can be:
slow, normal, fast; slow is 0.6 seconds; normal is 0.4 seconds; fast is 0.2 seconds
The millisecond value represented by the numerical value

4. Fade in and fade out Effect

.fadein() Specifies the fade-in effect for the matching element
.fadeout() Specifies the fade-out effect for the matching element
Speed ​​can also be specified using .fadein() or .fadeout() Values, such as: slow, normal, fast, milliseconds
The implementation of fade in and out is actually to increase or decrease the opacity of the matching element.
5. Create animation effects
jQuery provides a powerful .animate() method through which you can create custom animations containing multiple effects. The .animate() method accepts the following four parameters:
A map containing style attributes and values.
Optional speed parameter, default is normal.
Optional easing type
Optional callback parameter.
6. Issues that should be considered when using .animate() to create animations
Restrictions imposed by css on the elements we want to change
For example, the css positioning of the element is not set When it is set to relative or absolute, adjusting the left attribute has no effect on the matching elements. The default CSS positioning property for all block-level elements is static. This value precisely indicates that if you try to move elements before changing their positioning properties, they will simply remain stationary.
Concurrency and queuing effects
Whether processing a group or multiple groups of elements in jQuery, they all happen at the same time by default. Therefore, concurrency issues have become an issue worth considering. To sum up, there are two points:
If you are processing a group of elements, you can control it according to the order of the code;
If you are processing multiple groups of elements, you can control it through the callback function;