About the jquery animate () method

Html:

        <button> Click me </button><p> if you want to execute the statement after a function that involves animation, use the callback function </p><div class= "Panel" > </div><div class= "Content" ></div>    

CSS section:

Note: When you use the Animate function, you must first set the Position property value to relative or absolute in order to affect the value of the top bottom left property of the element.

            . panel {width:100px;height:100px;border:1px solid #0050d0; background:red;cursor:pointer;position:relative;}. content {Width:100px;height:100px;margin-top:20px;background:green;}        

If the + = or-= representation is incremented or decremented at the current position before 500

        $ (". Panel"). Click (function () {$ (this). Animate ({left: "+=500"},3000);//Increment         })  

Perform multiple animations at the same time

$ (this). Animate ({left: "$", Top: "200"},3000);

Animate sequentially--animation queue

$ (this). Animate ({left: "500"},3000); $ (this). Animate ({top: "200"},3000);

The above can be changed to chained style

$ (this). Animate ({left: "500px"},3000). Animate ({top: "200px"}, 3000);

Integrated animations
Transparency can be used in decimals, with a percentage of invalid

$ (this). Animate ({left: "500px", Height: "200px", Opacity: "0.5"},3000). Animate ({top: "200px", Width: "200px"},3000). FadeOut ("slow");

Add the Stop () method to the hover event to resolve an issue in which the cursor action is inconsistent with the animation effect when the move-out action is too fast
Note: You need to add stop () to move in

$ (". Panel"). Hover (function () {$ (this). Stop (). Animate ({height: "max", Width: "},3000")},function () {$ (this). Stop ( ). Animate ({height: "$", Width: "60"},3000)})

When it comes to combining animations,

                    $ (". Panel"). Hover (function () {$ (this). Stop (). Animate ({height: "150"},3000)//If the cursor is moved out at this time. Animate ({width: "300"},3000) Perform this animation instead of moving out the animation},function () {$ (this). Stop (). Animate ({height: "},3000"). Animate ({width: "60"},3000)})            

Set the Stop () first parameter to True to resolve the above problem, skipping the style change of width 300 to perform a mouse out event

                    $ (". Panel"). Hover (function () {$ (this). Stop (true). Animate ({height: "150"},3000)//If at this point the cursor is moved out. Animate ({width: "300"}, 3000)//Perform the following move out of the animation},function () {$ (this). Stop (true). Animate ({height: "},3000"). Animate ({width: "60"},3000)})

If the Stop () second parameter is also set to true, the state of the end time can be reached directly

　　

　　

　　

　　

　　

　　

　　

　

About the jquery animate () method