如何在jQuery中同时运行两个动画

jQuery中的.animate()方法是用来处理效果和动画的。有数字值的属性可以通过这个方法进行动画处理，如宽度，高度，边界宽度等。通常情况下，如果不同的动画在同一个html元素上被链起来，jQuery会将它们添加到一个队列中，并按顺序执行。在这篇文章中，我们将讨论如何使这些动画同时进行。animate()方法只有在页面上发生（被监听的）事件后才会触发。对于两个不同的HTML元素，在触发一个事件时，动画将同时发生。

根据jQuery官方文档，.animate()方法提供了两种原型。

.animate( properties, [ duration ], [ easing ], [ complete ]) 。属性是css属性的普通javascript对象，后面是一个整数、一个字符串和一个布尔值，用于其余部分。
.animate( properties, options )。属性和选项都是普通的javascript对象。选项对象可以传递一个可选的’queue’属性，它可以让我们选择是否要将连锁的动画添加到队列中。在这个例子中，我们将使用第二个原型。

下面的代码演示了连锁动画的样子。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous">
    </script>
    <title>Document</title>
</head>
  
<body>
    <div class="button">
        <button id="bt1">Hey Geeks
    </div>
    <style>
        button{
            background-color: rgb(31, 156, 0);
            border: none;
            color: white;
            font-size: 20px;
        }
    </style>
  
    <script type="text/javascript">
        (document).ready( ()=>{
  
            // Event listener to recognise click
            // Animations will occur sequentially
            // and will be added to queue
            ('#bt1').on('click', () => {
                $('#bt1').animate({fontSize : '40px'}, {duration : 1000})
                .animate({width : '300px'}, {duration : 1000})
                .animate({height : '300px' }, {duration : 1000});
            });
        });
    </script>
</body>
  
</html>

在上面的例子中，我们在HTML按钮元素上链了三个动画。这些动画在点击时触发。下面这组代码也会发生同样的情况。

$(document).ready( ()=>{
  
    // Event listener to listen for click
    // Animations will be added to queue
    // and occur sequentially
    $('#bt1').on('click', () => {
        $('#bt1').animate({fontSize : '30px'}, {duration : 1000})
        $('#bt1').animate({width : '300px'}, {duration : 1000})
        $('#bt1').animate({height : '300px' }, {duration : 1000});
    });
});

输出:
如何在jQuery中同时运行两个动画？

我们可以通过两种方式使动画同时触发。

方法1：在选项中使用 “QUEUE “属性

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <script src=
"https://code.jquery.com/jquery-3.4.1.min.js"
    integrity=
"sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous">
    </script>
    <title>Document</title>
</head>
  
<body>
    <div class="button">
        <button id="bt1">Button1
    </div>
    <style>
        button{
            background-color: rgb(31, 156, 0);
            border: none;
            color: white;
            font-size: 20px;
        }
    </style>
    <script type="text/javascript">
        (document).ready( ()=>{
  
            /* Animations will not be added to queue
               and hence occur simultaneously*/
            ('#bt1').on('click', () => {
                $('#bt1').animate({fontSize : '60px'}, 
                    {duration : 1000, queue : false})
                .animate({width : '300px'},
                 {duration : 1000, queue : false})
                .animate({height : '300px' }, 
                 {duration : 1000, queue : false});
            });
        });
    </script>
</body>
  
</html>

输出:
如何在jQuery中同时运行两个动画？

通过传递选项queue：false，我们确保动画不会被添加到队列中。jQuery中默认的动画队列叫做fx。当你希望某些动画同时发生和某些动画按顺序发生时，上述方法特别有用，代码的可读性更好。默认情况下，队列是真。

方法2：在一个单一的对象中传递所有的css属性。

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
                content="width=device-width,
                initial-scale=1.0">
    <script src=
"https://code.jquery.com/jquery-3.4.1.min.js"
    integrity=
"sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous">
    </script>
    <title>Document</title>
</head>
  
<body>
    <div class="button">
        <button id="bt1">Button1
    </div>
    <style>
        button{
            background-color: rgb(31, 156, 0);
            border: none;
            color: white;
            font-size: 20px;
        }
    </style>
    <script type="text/javascript">
        (document).ready( ()=>{
  
            /* All the animations have been passed
               as a single object and hence will
               occur simultaneously*/
            ('#bt1').on('click', () => {
                $('#bt1').animate({
                     fontSize : '60px',
                     width : '300px',
                     height : '300px'
                },
                {duration : 1000})
                });
        });
    </script>
</body>
  
</html>