JQuery .animate()用法及代码示例

用法

.animate( properties [, duration ] [, easing ] [, complete ] ) => jQuery

说明：执行一组 CSS 属性的自定义动画。

添加的版本：1.0.animate( properties [, duration ] [, easing ] [, complete ] )
- properties
  
  类型：PlainObject
  
  动画将向其移动的 CSS 属性和值的对象。
- duration(默认：400)
  
  类型：Number 或 String
  
  确定动画将运行多长时间的字符串或数字。
- easing(默认：swing)
  
  类型：String
  
  一个字符串，指示用于转换的缓动函数。
- complete
  
  类型：Function ()
  
  动画完成后调用的函数，每个匹配元素调用一次。
添加的版本：1.0.animate( properties, options )
- properties
  
  类型：PlainObject
  
  动画将向其移动的 CSS 属性和值的对象。
- options
  
  类型：PlainObject
  
  要传递给方法的附加选项的映射。
  - duration(默认：400)
    
    类型：Number 或 String
    
    确定动画将运行多长时间的字符串或数字。
  - easing(默认：swing)
    
    类型：String
    
    一个字符串，指示用于转换的缓动函数。
  - queue(默认：true)
    
    类型：Boolean 或 String
    
    一个布尔值，指示是否将动画放置在效果队列中。如果为 false，动画将立即开始。As of jQuery 1.7， queue 选项也可以接受一个字符串，在这种情况下，动画被添加到该字符串表示的队列中。当使用自定义队列名称时，动画不会自动启动；你必须调用.dequeue("queuename")开始它。
  - specialEasing
    
    类型：PlainObject
    
    一个对象，包含一个或多个由 properties 参数定义的 CSS 属性及其相应的缓动函数。(添加的版本：1.4)
  - step
    
    类型：Function(现在是Number，Tween补间)
    
    为每个动画元素的每个动画属性调用的函数。此函数提供了修改 Tween 对象以在设置之前更改属性值的机会。
  - progress
    
    类型：Function(Promise动画，Number进度，NumberremainingMs)
    
    在动画的每个步骤之后要调用的函数，每个动画元素仅调用一次，而与动画属性的数量无关。(添加的版本：1.8)
  - complete
    
    类型：Function ()
    
    元素上的动画完成后调用的函数。
  - start
    
    类型：Function(Promise动画)
    
    当元素上的动画开始时调用的函数。(添加的版本：1.8)
  - done
    
    类型：Function(Promise 动画，Boolean jumpedToEnd)
    
    当元素上的动画完成(其 Promise 对象已解析)时要调用的函数。(添加的版本：1.8)
  - fail
    
    类型：Function(Promise 动画，Boolean jumpedToEnd)
    
    当元素上的动画未能完成时调用的函数(其 Promise 对象被拒绝)。(添加的版本：1.8)
  - always
    
    类型：Function(Promise 动画，Boolean jumpedToEnd)
    
    当元素上的动画完成或停止但未完成时调用的函数(其 Promise 对象被解析或拒绝)。(添加的版本：1.8)

.animate() 方法允许我们在任何数字 CSS 属性上创建动画效果。唯一需要的参数是 CSS 属性的普通对象。此对象类似于可以发送到.css() 方法的对象，只是属性范围更受限制。

动画属性和值

所有动画属性都应该动画到 single numeric value ，除非下面提到；大多数非数字属性无法使用基本的 jQuery 函数进行动画处理(例如，width、height 或 left 可以进行动画处理，但 background-color 不能进行动画处理，除非使用了 jQuery.Color 插件)。除非另有说明，否则属性值被视为像素数。可以在适用的情况下指定单位em 和%。

除了样式属性之外，一些非样式属性，例如 scrollTop 和 scrollLeft 以及自定义属性，都可以进行动画处理。

不完全支持速记 CSS 属性(例如字体、背景、边框)。例如，如果要对渲染的边框宽度进行动画处理，则至少必须预先设置"auto"以外的边框样式和边框宽度。或者，如果您想为字体大小设置动画，您可以使用 fontSize 或 CSS 等效的 'font-size' 而不是简单的 'font' 。

除了数值之外，每个属性都可以采用字符串 'show' 、 'hide' 和 'toggle' 。这些快捷方式允许自定义隐藏和显示考虑到元素显示类型的动画。为了使用 jQuery 的内置切换状态跟踪，'toggle' 关键字必须始终作为动画属性的值。

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

注意：与速记动画方法不同，例如.slideDown()和.fadeIn()，这.animate()方法确实not使隐藏元素作为效果的一部分可见。例如，给定$( "someElement" ).hide().animate({height: "20px"}, 500)，动画会运行，但是the element will remain hidden.

期间

持续时间以毫秒为单位；较高的值表示较慢的动画，而不是较快的动画。默认持续时间为400 毫秒。可以提供字符串'fast' 和'slow' 来分别表示200 和600 毫秒的持续时间。

回调函数

如果提供，start、step、progress、complete、done、fail和always回调将在per-element的基础上调用； this 设置为动画的 DOM 元素。如果集合中没有元素，则不会调用回调。如果为多个元素设置了动画，则每个匹配的元素都会执行一次回调，而不是对整个动画执行一次。使用.promise() 方法获取一个promise，您可以将回调附加到该promise 上，该回调会为任何大小的动画集(包括零元素)触发一次。

基本用法

为任何元素设置动画，例如简单的图像：

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123"
  style="position: relative; left: 10px;">

要同时为图像的不透明度、左偏移和高度设置动画：

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    opacity: 0.25,
    left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
});

请注意，height 属性的目标值为 'toggle' 。由于图像之前可见，因此动画将高度缩小到 0 以隐藏它。然后再次单击会反转此转换：

图像的opacity 已经是它的目标值，所以第二次点击时这个属性没有动画。由于left 的目标值是一个相对值，因此在第二个动画期间，图像向右移动得更远。

方向属性(top、right、bottom、left)如果元素的 position 样式属性为 static (默认情况下)，则对元素没有明显影响。

注意： jQuery 用户接口项目扩展了.animate()方法是允许一些非数字样式(例如颜色)进行动画处理。该项目还包括通过 CSS 类而不是单个属性指定动画的机制。

注意：如果尝试为高度或宽度为 0px 的元素设置动画，其中元素的内容由于溢出而可见，jQuery 可能会在动画期间剪辑此溢出。但是，通过固定隐藏的原始元素的尺寸，可以确保动画顺利运行。一种清除修复可用于自动修复主要元素的尺寸，而无需手动设置。

阶跃函数

.animate() 的第二个版本提供了一个step 选项——一个在动画的每一步触发的回调函数。此函数对于启用自定义动画类型或更改正在发生的动画很有用。它接受两个参数( now 和 fx )，并且 this 设置为动画的 DOM 元素。

now : 每一步动画属性的数值
fx ：对jQuery.fx原型对象的引用，其中包含许多属性，例如动画元素的elem，动画属性的第一个和最后一个值的start和end，和 prop 用于动画的属性。

请注意，为每个动画元素上的每个动画属性调用 step 函数。例如，给定两个列表项，step 函数在动画的每个步骤中触发四次：

$( "li" ).animate({
  opacity: .5,
  height: "50%"
}, {
  step: function( now, fx ) {
    var data = fx.elem.id + " " + fx.prop + ": " + now;
    $( "body" ).append( "<div>" + data + "</div>" );
  }
});

缓和

.animate() 的剩余参数是一个字符串，用于命名要使用的缓动函数。缓动函数指定动画在动画中不同点的进展速度。 jQuery 库中唯一的缓动实现是默认实现，称为 swing ，以及以恒定速度进行的实现，称为 linear 。使用 plug-ins 可以使用更多的缓动函数，尤其是 jQuery UI suite 。

Per-property 缓动

从 jQuery 版本 1.4 开始，您可以在单个 .animate() 调用中设置 per-property 缓动函数。在 .animate() 的第一个版本中，每个属性都可以将数组作为其值：数组的第一个成员是 CSS 属性，第二个成员是缓动函数。如果没有为特定属性定义 per-property 缓动函数，则它使用 .animate() 方法的可选缓动参数的值。如果未定义缓动参数，则使用默认的swing 函数。

例如，要同时使用swing easing 函数为宽度和高度设置动画，并使用linear easing 函数为不透明度设置动画：

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    width: [ "toggle", "swing" ],
    height: [ "toggle", "swing" ],
    opacity: "toggle"
  }, 5000, "linear", function() {
    $( this ).after( "<div>Animation complete.</div>" );
  });
});

在 .animate() 的第二个版本中，选项对象可以包含 specialEasing 属性，它本身就是 CSS 属性及其相应缓动函数的对象。例如，要同时使用linear easing 函数为宽度设置动画，并使用easeOutBounce easing 函数为高度设置动画：

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    width: "toggle",
    height: "toggle"
  }, {
    duration: 5000,
    specialEasing: {
      width: "linear",
      height: "easeOutBounce"
    },
    complete: function() {
      $( this ).after( "<div>Animation complete.</div>" );
    }
  });
});

如前所述，easeOutBounce 函数需要插件。

其他注意事项：

所有 jQuery 效果，包括 .animate() ，都可以通过设置 jQuery.fx.off = true 来全局关闭，这有效地将持续时间设置为 0。有关更多信息，请参阅 jQuery.fx.off 。

例子：

单击按钮以使用许多不同的属性为 div 设置动画。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animate demo</title>
  <style>
  div {
    background-color: #bca;
    width: 100px;
    border: 1px solid green;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button id="go">&raquo; Run</button>
<div id="block">Hello!</div>
 
<script>
// Using multiple unit types within one animation.
 
$( "#go" ).click(function() {
  $( "#block" ).animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "10px"
  }, 1500 );
});
</script>
 
</body>
</html>

演示：

使用相对值对 div 的 left 属性进行动画处理。单击按钮几次以查看排队的相关动画。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animate demo</title>
  <style>
  div {
    position: absolute;
    background-color: #abc;
    left: 50px;
    width: 90px;
    height: 90px;
    margin: 5px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button id="left">&laquo;</button>
<button id="right">&raquo;</button>
<div class="block"></div>
 
<script>
$( "#right" ).click(function() {
  $( ".block" ).animate({ "left": "+=50px" }, "slow" );
});
 
$( "#left" ).click(function(){
  $( ".block" ).animate({ "left": "-=50px" }, "slow" );
});
</script>
 
</body>
</html>

演示：

第一个按钮显示了一个未排队的动画是如何工作的。当 font-size 增加时，它将 div 扩展到 90% 宽度。 font-size 更改完成后，边框动画将开始。第二个按钮启动传统的链式动画，其中每个动画将在元素上的前一个动画完成后开始。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animate demo</title>
  <style>
  div {
    background-color: #bca;
    width: 200px;
    height: 1.1em;
    text-align: center;
    border: 2px solid green;
    margin: 3px;
    font-size: 14px;
  }
  button {
    font-size: 14px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button id="go1">&raquo; Animate Block1</button>
<button id="go2">&raquo; Animate Block2</button>
<button id="go3">&raquo; Animate Both</button>
<button id="go4">&raquo; Reset</button>
<div id="block1">Block1</div>
<div id="block2">Block2</div>
 
<script>
$( "#go1" ).click(function() {
  $( "#block1" )
    .animate({
      width: "90%"
    }, {
      queue: false,
      duration: 3000
    })
    .animate({ fontSize: "24px" }, 1500 )
    .animate({ borderRightWidth: "15px" }, 1500 );
});
 
$( "#go2" ).click(function() {
  $( "#block2" )
    .animate({ width: "90%" }, 1000 )
    .animate({ fontSize: "24px" }, 1000 )
    .animate({ borderLeftWidth: "15px" }, 1000 );
});
 
$( "#go3" ).click(function() {
  $( "#go1" ).add( "#go2" ).click();
});
 
$( "#go4" ).click(function() {
  $( "div" ).css({
    width: "",
    fontSize: "",
    borderWidth: ""
  });
});
</script>
 
</body>
</html>

演示：

动画第一个 div 的 left 属性并同步剩余的 div，使用 step 函数在动画的每个阶段设置它们的 left 属性。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>animate demo</title>
  <style>
  div {
    position: relative;
    background-color: #abc;
    width: 40px;
    height: 40px;
    float: left;
    margin: 5px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p><button id="go">Run »</button></p>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
 
<script>
$( "#go" ).click(function() {
  $( ".block" ).first().animate({
    left: 100
  }, {
    duration: 1000,
    step: function( now, fx ){
      $( ".block" ).slice( 1 ).css( "left", now );
    }
  });
});
</script>
 
</body>
</html>

演示：

为所有段落设置动画以切换高度和不透明度，在 600 毫秒内完成动画。

$( "p" ).animate({
  height: "toggle",
  opacity: "toggle"
}, "slow" );

将所有段落设置为左侧样式 50 和不透明度 1(不透明、可见)，在 500 毫秒内完成动画。

$( "p" ).animate({
  left: 50,
  opacity: 1
}, 500 );

动画所有段落的左侧和不透明度样式属性；将动画outside 运行到队列中，这样它就会自动启动而无需等待轮到它。

$( "p" ).animate({
  left: "50px",
  opacity: 1
}, {
  duration: 500,
  queue: false
});

使用'easing' 函数提供不同风格动画的示例。这仅在您有一个提供此缓动函数的插件时才有效。请注意，除非段落元素被隐藏，否则此代码不会执行任何操作。

$( "p" ).animate({
  opacity: "show"
}, "slow", "easein" );

动画所有段落以切换高度和不透明度，在 600 毫秒内完成动画。

$( "p" ).animate({
  height: "toggle",
  opacity: "toggle"
}, {
  duration: "slow"
});

使用缓动函数来提供不同风格的动画。这仅在您有一个提供此缓动函数的插件时才有效。

$( "p" ).animate({
  opacity: "show"
}, {
  duration: "slow",
  easing: "easein"
});

动画所有段落并在动画完成时执行回调函数。第一个参数是 CSS 属性的对象，第二个指定动画需要 1000 毫秒才能完成，第三个表示缓动类型，第四个参数是匿名回调函数。

$( "p" ).animate({
  height: 200,
  width: 400,
  opacity: 0.5
}, 1000, "linear", function() {
  alert( "all done" );
});

相关用法

注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 .animate()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。

JQuery .animate()用法及代码示例

用法
`.animate( properties [, duration ] [, easing ] [, complete ] ) => jQuery`

添加的版本：1.0`.animate( properties [, duration ] [, easing ] [, complete ] )`

添加的版本：1.0`.animate( properties, options )`

动画属性和值

期间

回调函数

基本用法

阶跃函数

缓和

Per-property 缓动

其他注意事项：

例子：

演示：

演示：

演示：

演示：

用法 .animate( properties [, duration ] [, easing ] [, complete ] ) => jQuery

添加的版本：1.0.animate( properties [, duration ] [, easing ] [, complete ] )

添加的版本：1.0.animate( properties, options )

动画属性和值

期间

回调函数

基本用法

阶跃函数

缓和

Per-property 缓动

其他注意事项：

演示：

演示：

演示：

演示：

用法
`.animate( properties [, duration ] [, easing ] [, complete ] ) => jQuery`

添加的版本：1.0`.animate( properties [, duration ] [, easing ] [, complete ] )`

添加的版本：1.0`.animate( properties, options )`