Sharp jQuery (Second Edition) animation in jquery

Time:2022-1-15

4.2 animation in jquery

4.2.1 show() and hide() methods

The show () and hide () methods make the element move
The length of show (“slow” | “normal” | “fast”) is 600ms, 400ms and 200ms respectively
Show (1000) indicates that the display is completed within 1000ms

4.2.2 fadein() and fadeout() methods

Method function: change the opacity of the element.

4.2.3 slideup() and slidedown() methods

Method function: change the height of the element.

4.2.4 custom animation () method

animate(params, [speed], [callback]):
1) Params are attribute values and their mappings, generally in JSON format;
2) Speed is the speed;
3) Callback is a function that executes when the animation is complete.

1. Customize simple animation

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    < title > JQ animation < / Title >
    <style>
    #app {
        position: relative;
        width: 100px;
        height: 100px;
        border: 1px solid #003322;
    }
    </style>
    <script></script>
</head>

<body>
    <div id="app">
    </div>
    <script>
    $(function() {
        $("#app").click(function() {
            $(this).animate({
                left: "100px"
            }, 300);
        });
    });
    </script>
</body>

</html>

2. Accumulation and subtraction animation

$(this). animate({left: "+=100px"}, 300); //  Distance from left increased by 100px

3. Multi animation
(1) Execute multiple animations at the same time

$(this). animate({left: "+=100px", height: "+=100px"}, 300); //  Increase the distance from the left by 100px, increase the height by 100px, and execute at the same time

(2) Perform multiple animations in order

$(this). animate({left: "+=100px"}, 300); //  Increase the distance from the left by 100px and execute first
$(this). animate({height: "+=100px"}, 300); //  Execute after height increase of 100px

4. Comprehensive animation
Mixed application of the above animation effects

4.2.5 animation callback function

If you want to change the CSS style of the element after the animation is executed, you cannot use the CSS () method at this time, because the CSS () method will be executed immediately before the animation is executed. So the callback function is used at this time.

4.2.6 Stop Animation and judge whether it is in animation state

Stop ([clearqueue], [gotoend]): clearqueue and gotoend can only take Boolean values.
clearQueue:  
gotoEnd:

If you directly use the stop () method, the animation currently in progress will be stopped immediately. If there are subsequent animations, wait for them to continue and execute the animation in the state just now.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    < title > JQ animation < / Title >
    <style>
    #app {
        position: relative;
        width: 100px;
        height: 100px;
        border: 1px solid #003322;
    }
    </style>
    <script></script>
</head>

<body>
    <div id="app">
    </div>
    <script>
    $(function() {
        $("#app").hover(function() {
            $(this).stop()
                . animate ({// when the cursor event is triggered, the following animation will be executed,
                    Left: "+ = 100px", // the animation when the cursor is moved out will not be executed
                }, 1000)    
                .animate({
                    height: "+=100px"
                }, 1000)
        }, function() {
            $(this).stop()
                .animate({
                    left: "-=100px",
                }, 1000)
                .animate({
                    height: "-=100px"
                }, 1000)
        });
    });
    </script>
</body>

</html>