jQuery animation connection

Through jQuery, actions/methods can be linked. Chaining allows us to allow multiple jQuery methods (on the same element) in one statement.

Until now, we have written jQuery statements one at a time (one right after the other). However, there is a technique called chaining that allows us to run multiple jQuery commands on the same element, one right after the other. Tip: This way the browser doesn't have to look for the same element multiple times.

To link an action, you simply append the action to the previous action.

Example 1. The following example links css(), slideUp(), and slideDown() together. The "p1" element will first turn red, then slide up, then down:

<!DOCTYPE html>  
<html>  
<head>  
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>  
$(document).ready(function()  
  {  
  $("button").click(function(){  
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);  
  });  
});  
</script>  
</head>  
<body>  
<p id="p1">jQuery 乐趣十足！</p>  
<button>点击这里</button>  
</body>  
</html>

We can also add multiple method calls if needed. Tip: When linking, lines of code get messed up. However, jQuery is not very strict about syntax; you can write it in any format you want, including line breaks and indentation.

Example 2, it can also be run if written like this:

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        $(document).ready(function()
        {
            $("button").click(function(){
                $("#p1").css("color","red")
                        .slideUp(2000)
                        .slideDown(2000);
            });
        });
    </script>
</head>
<body>
<p id="p1">jQuery 乐趣十足！</p>
<button>点击这里</button>
</body>
</html>

jQuery will throw away extra spaces and execute the above line of code as one long line of code.

Continuing Learning

new file

<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script> $(document).ready(function() { $("button").click(function(){ $("#p1").css("color","red") .slideUp(2000) .slideDown(2000); }); }); </script> </head> <body> <p id="p1">jQuery 乐趣十足！</p> <button>点击这里</button> </body> </html>

submit Reset Code

Automatic operation

jQuery animation connection

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]