Jquery animation Mechanism

Jquery's animation mechanism attracts many background developers and foreground developers. Let's take a look at it:

1. Show () and hide () Methods
The show () and hide () methods are the most basic methods in jquery. They are used to display or hide a certain element:

1: $ ("# input "). focus (function () {2: $ (this ). hide (); 3:}); 4: $ ("# input "). blur (function () {5: $ (this ). show (); 6:}); the function of the code above is to hide the element whose ID is input when the focus is obtained, and display the element whose focus is lost.
The display and hiding of the Code in the previous section are very stiff. To achieve an elegant animation effect, we only need to input parameters in the show () and hide () methods, parameters include string parameters such as slow, normal, and fast, or the number of milliseconds in which the animation lasts. We can rewrite the Code as follows to achieve an elegant animation effect:

1: $ ("# input "). focus (function () {2: $ (this ). hide (2000); 3:}); 4: $ ("# input "). blur (function () {5: $ (this ). show ("fast"); 6:}); 2. fadein (), fadeout (), slidedown (), and slideup () Methods
The fadeIn () and fadeOut () methods only change the transparency of elements to achieve the transition between display and hiding. SlideDown () and slideUp () are animations that are displayed and hidden by changing the height of an element. The parameters are the same as those of show () and hide.

3. Custom Animation animation () method
In actual use, none of the above animation effects can meet the requirements. Therefore, jQuery provides a Custom Animation method, animate (), to meet the needs of specific animation effects.

The animate () method can take three parameters, the last two of which are optional: animate (params, speed, callback );

The params parameter is the final effect of the animation, for example, {background: "# eeeeee", color: "# ffffff "};

As the name implies, the speed parameter is the animation duration;

The callback parameter is the method executed after the animation is executed, that is, the callback method.

Example:

1: var input_function = function () {2: $ ("# input "). val ("Please input here .. "); 3:} 4: var $ width; 5: var $ height 6: $ (" # input "). focus (function () {7: $ width = fill (this).css ("width"); 8: $ height = fill (this).css ("height"); 9: $ (this ). animate ({width: "80%", height: "100px"}, 500, function () {10: $ (this ). val (""); 11:}); // directly use the anonymous method; 12:}); 13: $ ("# input "). blur (function () {14: $ (this ). animate ({width: $ width, height: $ height}, 500, input_function); // use the defined method; 15:}); 16: $ ("# input "). blur (); // when the page loading ends, it is called # The blur event of input. The above animation effect shows that the width and height changes are synchronized. Sometimes we need to change the width first, then change the height, which means we should break down the width and height to form multiple animations. Multiple animations are executed in sequence:

1: var input_function = function () {2: $ ("# input "). val ("Please input here .. "); 3:} 4: var $ width; 5: var $ height 6: $ (" # input "). focus (function () {7: $ width = fill (this).css ("width"); 8: $ height = fill (this).css ("height"); 9: $ (this ). animate ({width: "80%"}, 500, function () {10 :$ (this ). val (""); 11:}) 12 :. animate ({height: "100px"}, 500); 13:}); 14: $ ("# input "). blur (function () {15: $ (this ). animate ({height: $ height}, 500, input_function) 16 :. animate ({width: $ width}, 500); 17:}); 18: $ ("# input "). blur (); 4. stop animation stop () method
The above animation example has a very mysterious effect, but when we make the # input get focus, lose focus, get focus, lose focus... Repeated in turn, but several rounds will find jQuery's animated special effects Cup, which won't work. Because we make the element focus-free during the execution of the animation with the focus, and the result is to execute the animation with the focus after the animation is executed, jQuery will be dizzy.

To solve this problem, we can call the stop () method to finish the unfinished animation before executing the next Animation:

1: var input_function = function () {2: $ ("# input "). val ("Please input here .. "); 3:} 4: var $ width; 5: var $ height 6: $ (" # input "). mouseover (function () {7: $ width = border (this).css ("width"); 8: $ height = border (this).css ("height"); 9: $ (this ). stop () 10 :. animate ({width: "80%"}, 500, function () {11 :$ (this ). val (""); 12:}); 13:}); 14: $ ("# input "). mouseout (function () {15: $ (this ). stop () 16 :. animate ({width: $ width }, 500, input_function); 17:}); 18: $ ("# input "). blur (); someone may ask me, why not implement two animations in sequence? That's so amazing! Some people may think this is to save the page. In fact, the real reason is that if multiple Animations () are implemented in turn, the cup is used. You can try it yourself. The solution is to input a parameter to animate (): true to enable coexistence of multiple animations.

 

5. Determine whether the element is being animated.
Determines whether an element is being animated. An animation is added only when the element is not being animated. The following code uses the basic filter selector to determine whether an element is being animated:

1: if (! $ (This ). is (": animated") {2: // code omitted here... 3:} 6. toggle (), slideToggle (), and fadeTo () Methods
The toggle () method calls the show () and hide () methods repeatedly. The slideToggle () method calls the slideDown () and slideUp () methods repeatedly.

The fadeTo () method is used to adjust elements to the specified transparency. There are two parameters: the first is the number of milliseconds of time, and the second is the transparency value. The usage is as follows:

1: $ ("# input"). mouseover (function () {2: $ (this). fadeTo (600, 0.3); 3:}); --- EOF ---

JQuery (⊙ o ⊙ )...

This article from the CSDN blog, reproduced please indicate the source: http://blog.csdn.net/mzule/archive/2011/02/18/6193810.aspx