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

jQuery 中的.animate()方法用于处理效果和动画。具有数值的属性可以通过此方法进行动画处理，例如宽度、高度、边框宽度等。但是，属性名称应该是驼峰式的（例如 borderWidth）。通常，如果不同的动画链接在同一个 html 元素上， jQuery 会将它们添加到队列中并按顺序执行。在本文中，我们将讨论如何同时制作此类动画。 animate() 方法只会在页面上发生事件（被监听）后触发。对于两个不同的 HTML 元素，在触发事件时，动画将同时发生。

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

• .animate( properties, [ duration ], [ easing ], [ complete ] ):属性是css属性的普通javascript对象，后面跟着一个整数、一个字符串和一个布尔值。
• .animate(properties, options)：属性和选项都是普通的 javascript 对象。选项对象可以通过可选的“队列”属性传递，它可以让我们选择是否要将链接的动画添加到队列中。出于本示例的目的，我们将使用第二个原型。

以下代码演示了链接动画的样子：

  

    
    
    
    
    Document

  

    
        Hey Geeks
    
    
        button{
            background-color: rgb(31, 156, 0);
            border: none;
            color: white;
            font-size: 20px;
        }
    
  
    
        $(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});
            });
        });
    

  

在上面的示例中，我们将三个动画链接到 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});
    });
});

输出：

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

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

  

    
    
    
    
    Document

  

    
        Button1
    
    
        button{
            background-color: rgb(31, 156, 0);
            border: none;
            color: white;
            font-size: 20px;
        }
    
    
        $(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});
            });
        });
    

  

输出：

通过传递选项queue : false ，我们确保动画不会被添加到队列中。 jQuery 中的默认动画队列称为 fx 。当您希望某些动画同时发生并且某些动画顺序发生且代码可读性更好时，上述方法特别有用。默认情况下，队列为 true 。

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

  

    
    
    
    
    Document

  

    
        Button1
    
    
        button{
            background-color: rgb(31, 156, 0);
            border: none;
            color: white;
            font-size: 20px;
        }
    
    
        $(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})
                });
        });
    

  

输出：

通过以上两种方法，可以同时实现jQuery中实现两个或多个动画的任务，而不是将它们放入队列并依次执行。