博客

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

  • Post category:jquery

当你需要在jQuery中同时运行两个动画时，你可以使用.animate()方法。.animate()方法允许你同时设置多个属性的动画过渡效果。下面是实现该功能的攻略：

1. 了解.animate()方法

.animate()方法允许你设置多个CSS属性的变化和动画效果，支持以对象或CSS样式字符串的形式指定要修改的属性和属性值，还可以在动画完成时附加一个回调函数。下面是.animate()方法的语法：

$(selector).animate(styles, speed, easing, callback);
  • selector：必需，用来指定要添加动画效果的元素。
  • styles：必需，用来指定CSS属性和属性值的对象或样式字符串。
  • speed：可选，指定动画完成的时间，单位为毫秒（默认值为400ms）。
  • easing：可选，用来指定动画的缓动函数（默认值为swing）。
  • callback：可选，回调函数在动画完成后执行。

2. 同时运行两个动画

下面是一个包含两个动画的示例，你可以把该代码放到你的jQuery代码中：

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").animate({left: '250px', opacity: '0.5'}, 2000);
    $("#div2").animate({left: '500px', opacity: '0.8'}, 2000);
  });
});

该示例通过点击按钮运行两个动画：

  • $("#div1").animate({left: '250px', opacity: '0.5'}, 2000)：这段代码将设置#div1元素的left属性值由原来的0px变为250px，opacity属性值由原来的1变为0.5。该动画需要2秒钟完成。
  • $("#div2").animate({left: '500px', opacity: '0.8'}, 2000)：同样地，该代码将设置#div2元素的left属性值由原来的0px变为500px，opacity属性值由原来的1变为0.8。该动画需要2秒钟完成。

在这个示例中，两个动画同时运行，而且需要2秒钟才能完成。这里使用了.animate()方法的对象形式来设置CSS属性和属性值。你可以自己尝试修改该代码，看看效果是否符合你的预期。

3. 使用回调函数

如果你需要同时运行两个动画，并且需要在两个动画完成后执行一些逻辑操作，你可以使用回调函数来实现该功能。下面是一个示例代码：

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").animate({left: '250px'}, 2000, function(){
      alert("Animation 1 is completed.");
    });
    $("#div2").animate({left: '500px'}, 2000, function(){
      alert("Animation 2 is completed.");
    });
  });
});

在这个示例代码中，两个动画完成后会依次弹出两个提示框。这里使用了.animate()方法的回调函数参数，在动画完成后执行代码。你可以将回调函数替换为其他函数，以便执行自己所需要的逻辑操作。

总结

通过使用 .animate() 方法和回调函数，你可以很容易地同时运行两个动画，而且还可以在两个动画完成后执行你所需要的操作。

Tags: