jquery animation effect (drawing on others)

2. (1) Several common animation effects in jquery

4. (2) Sequence of animation queue execution

   For animation effects on a set of elements, there are two things:

   A) When multiple properties are applied in a animate () method, the animation occurs at the same time.

   b) When the animation method is applied as a chain, the animation occurs in sequence.

   For animation effects on multiple groups of elements, the following is the case: a) By default, animations occur at the same time. b) When animation is applied in the form of callbacks, the animation occurs in the order of the callback. In addition, in the animation method, to note that other non-animated methods will queue, such as the CSS () method, to make these non-animated methods are also executed in order, you need to write these methods in the animation method callback function. Give an example of animate:

   $ ("#id"). Animate ({left: "400px", Top: "300px"},3000,function () {$ (this). CSS ("Border", "1px solid Blue");});

6. 3

   (3) If you want the animation to stop, you need to insert the stop () method before the animate () method.

   For example: $ ("#id"). Stop (). Animate () Note the two parameters in stop.

8. 4

   (4) The method to determine whether an element is in an animated state is as follows:

   $ (Element). Is (": animated");

10. 5

    (5) The method of animation commonly used in jquery is hide () and show () $ (Element). Hide () This code can be equal to this element.css ("display", "none") in Hide (time) with show ( Time) is filled with events that can fade away and appear. You can modify the element's multiple styles, height, width, and opacity. Another set of methods Fadein () and fadeout () Unlike hide and show, the height of the page is changed when you use Hide or show, and Fadein and fadeout do not.

    $ ("button"). Click (function () {  var div=$ ("div");  Div.animate ({height: ' 300px ', opacity: ' 0.4 '}, "slow");  Div.animate ({width: ' 300px ', opacity: ' 0.8 '}, "slow");  Div.animate ({height: ' 100px ', opacity: ' 0.4 '}, "slow");  Div.animate ({width: ' 100px ', opacity: ' 0.8 '}, ' slow ');});
    
    
    
    

    $ ("button"). Click (function () {  var div=$ ("div");  Div.animate ({left: ' 100px '}, "slow");  Div.animate ({fontSize: ' 3em '}, "slow");});

jquery animation effect (drawing on others)