编辑这个页面须要登录或更高权限！

jQuery 效果 - 动画

jQuery允许我们创建自定义动画。

点击我！

jQuery动画-animate()方法

jQuery animate()方法对一组CSS属性执行自定义动画。

这是animate()方法的语法：

$(selector).animate({styles}, duration, easing, callback)

参数：

  • {styles} -指定动画将向其移动的CSS属性和值的对象

  • duration -确定动画效果将运行多长时间。可能的值：“ slow”，“ fast”或毫秒

  • easing -指示要用于过渡的缓动功能。可能的值：“ swing”，“ linear”

  • callback-指定在animate()方法完成后要调用的函数

以下示例通过更改元素的宽度为元素设置动画：

$("button").click(function(){
  $("div").animate({width: "500px"});
});
测试看看‹/›

以下示例通过更改元素的位置来对元素进行动画处理：

$("button").click(function(){
  $("div").animate({left: "500px"});
});
测试看看‹/›

默认情况下，所有HTML元素都具有静态位置，并且静态元素无法移动。

要操纵位置，请记住首先将元素的CSS 位置属性设置为相对，固定或绝对。

jQuery animate()-设置多个属性

我们还可以同时为一个元素的多个属性设置动画。

$("button").click(function(){
  $("div").animate({
    width:"500px",
    height:"400px",
    opacity: 0.3,
    left: "50px"
  });
});
测试看看‹/›

以下示例使用animate()演示了duration和easing参数：

$("button").click(function(){
  $("div").animate({
    width:"500px",
    height:"400px"
  }, 4000, "linear");
});
测试看看‹/›

以下示例使用animate()演示了回调参数：

$("button").click(function(){
  $("div").animate({
    width:"500px",
    height:"400px"
  }, 500, "linear",
  function(){
    $(this).after("<h2>动画已经完成</h2>");
  });
});
测试看看‹/›

使用animate()方法时要记住的要点：

  • 所有动画属性都应设置为单个数值（例如，宽度，高度或左值）。

  • 字符串值不能设置为动画（例如，背景颜色）

  • 要设置背景颜色的动画，请使用jQuery颜色插件

  • 与animate()方法一起使用时，属性名称必须为camelCased，如：您应该使用paddingTop而不是padding-top，使用marginLeft而不是margin-left，等等。

jQuery animate()-使用队列动画

默认情况下，jQuery带有动画的队列功能。

在队列中，一个或多个功能等待运行。

这意味着，如果您彼此之后编写多个animate()调用，则jQuery将使用这些方法调用创建一个“内部”队列。然后，它一个一个地运行动画调用。

下面的示例首先更改DIV元素的宽度，然后更改高度，然后增加文本的字体大小：

$("button").click(function(){
  let div = $("div");
  div.animate({width:"500px"});
  div.animate({height:"200px"});
  div.animate({fontSize: "10em"});
});
测试看看‹/›

我们还可以使用jQuery的链接功能在一个队列中逐个动画一个元素的多个属性。

$("button").click(function(){
  $("div")
    .animate({width:"500px"})
    .animate({height:"200px"})
    .animate({fontSize: "10em"})
    .animate({opacity: 0.3});
});
测试看看‹/›

您将在本教程的后面部分了解有关链接的更多信息。

jQuery animate()-使用相对值

动画属性也可以是相对的。如果为值提供了前导+=或-=字符序列，则通过从属性的当前值中添加或减去给定的数字来计算目标值。

$("p").click(function(){
  $(this).animate({
    fontSize: "+=5px",
    padding : "+=10px"
  });
});
测试看看‹/›

jQuery animate()-使用预定义值

此外，我们甚至可以指定属性的动画值"show"，"hide"或"toggle"：

$("button").click(function(){
  $("div").animate({height: "toggle"});
});
测试看看‹/›

jQuery效果参考

有关完整的效果参考，请访问我们的jQuery 效果参考手册。

jQuery 停止动画jQuery 滑动