jQuery animation

jQuery Animation - animate() method

jQuery animate() method is used to create custom animations.

Syntax:

##$(selector).animate({params},speed,callback);

Required The params parameter defines the CSS properties that form the animation.

The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is the name of the function to be executed after the animation is completed.

The following example demonstrates a simple application of the animate() method. It moves the <div> element 250 pixels to the right:

Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("div").animate({left:'250px'});
            });
        });
    </script>
</head>
<body>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

Run the program and try it

Tip: By default, all HTML elements have a static position and are not movable. If we need to change it, we need to set the element's position attribute to relative, fixed, or absolute!

jQuery animate() - Manipulating multiple attributes

Please note that multiple attributes can be used at the same time during the animation generation process:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("div").animate({
                    left:'250px',
                    opacity:'0.5',
                    height:'150px',
                    width:'150px'
                });
            });
        });
    </script>
</head>
<body>
<button>开始动画</button>
<div style="background:#4ae936;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

Run the program to try it

jQuery animate () - Relative values can also be defined using relative values

(the value is relative to the current value of the element). You need to add += or -= in front of the value:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("div").animate({
                    left:'250px',
                    height:'+=150px',
                    width:'+=150px'
                });
            });
        });
    </script>
</head>
<body>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

Run the program to try it

jQuery animate() - Use predefined values

You can even animate the property's value to "show", "hide" or "toggle":

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("div").animate({
                    height:'toggle'
                });
            });
        });
    </script>
</head>
<body>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

Run the program to try it out

jQuery animate() - Using queue functionality

By default, jQuery provides queue functionality for animations.

This means that if you write multiple animate() calls after each other, jQuery will create an "internal" queue containing those method calls. Then run these animate calls one by one.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("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");
            });
        });
    </script>
</head>
<body>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>

Run the program and try it

The following example moves the <div> element to the right by 100 pixels, and then increases the font size of the text:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                var div=$("div");
                div.animate({left:'100px'},"slow");
                div.animate({fontSize:'3em'},"slow");
            });
        });
    </script>
</head>
<body>
<button>开始动画</button>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>

Run Try the program

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("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"); }); }); </script> </head> <body> <button>开始动画</button> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div> </body> </html>

submit Reset Code

Automatic operation

jQuery animation

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]