.animate() : 根据一组 CSS 属性，执行自定义动画。 - jQuery API 中文文档

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

Animation Properties and Values(动画属性和值)

所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。（例如， width , height 或者 left 可以执行动画，但是 background-color 不能，除非使用 jQuery.Color() 插件。）属性值的单位像素（px）,除非另有说明。单位 em 和 % 需要指定使用。

除了样式属性，一些非样式的属性，如 scrollTop 和 scrollLeft ，以及自定义属性，也可应用于动画。

CSS简写属性（例如font, background, border）没有得到充分的支持。例如，如果你想边框宽度做动画呈现，至少边框样式和边框宽度必须预先设定不为"auto" 。或者，如果你想字体大小做动画，你可以使用


    fontSize

的或相当于CSS的


    'font-size'

，而不是简单的


    'font'

。

除了定义数值，每个属性能使用 'show' , 'hide' , 和 'toggle' 。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏。为了使用jQuery内置的切换状态跟踪， 'toggle' 关键字必须在动画开始前给定属性值。（注：jquery中有两个.toggle()方法，一个是显示或隐藏匹配元素。另一个是绑定两个或多个处理程序绑定到匹配的元素，用来执行在交替的点击。哪一个被调用取决于传递的参数的设置。所以这里 'toggle' 关键字必须在动画开始前给定属性值，以确认调用哪个 'toggle' 方法。）

动画属性也可以是一个相对值。如果提供一个以 += 或 -= 开始的值，那么目标值就是以这个属性的当前值加上或者减去给定的数字来计算的。

不同于动画的简便方法，比如


    .slideDown()

和


    .fadeIn()


    .animate()

方法不会影响隐藏元素的可见性部分的效果。例如，给定


    $('someElement').hide().animate({height:'20px'}, 500)

，动画将执行，但 该元素将保持隐藏 。

Duration（持续时间）

持续时间是以毫秒为单位的；值越大表示动画执行的越慢，不是越快。还可以提供 'fast' 和 'slow' 字符串，分别表示持续时间为 200 和 600 毫秒。

Complete Function（完成函数）

如果提供 complete 回调函数将在动画完成后被执行一次。这对于按顺序执行一系列不同动画时，特别有用。这个回调函数不设置任何参数，但是 this 会被传递到正在执行动画的DOM元素上，如果多个元素一起做动画效果，值得注意的是这个回调函数在每个匹配元素上执行一次，不是这个动画作为一个整体。

Basic Usage（基本用法）

我们可以为任何元素做动画，比如这样的一个简单图片：

这个图片的 opacity 已经是其目标值了，所以这个属性在第二次点击的时候不会有动画效果。由于我们给定了 left 目标值作为相对值，在第二次动画中图片将向右移动得更远。

如果元素的定位属性是静态的，即 position 样式属性是 static 默认值，那么他们的定位属性（ top , right , bottom , left )没有明显的效果。

注意: jQuery UI 项目扩展了 .animate() 方法，允许一些非数值的样式，比如颜色，应用动画。该项目还包括通过CSS classes来指定动画的机制而不是单独的属性。

如果试图将元素高度或宽度动画至 0px，元素的内容是可见的，可能在动画中溢出。通过固定原始元素的尺寸，隐藏内容解决。这样可以确保动画平稳运行。一个 clearfix 可以用来自动修复您的主要元素的尺寸，而无需手动设置。

Step Function

第二个版本的 .animate() 提供了一个 step 选项- 每步动画执行后调用的回调函数。启用自定义动画类型或改变正在执行的动画，此功能是非常有用。它接受两个参数（ now 和 fx ）， this 是当前正在执行动画的DOM元素集合。 now : 每一步动画属性的数字值 fx : jQuery.fx 原型对象的一个引用，其中包含了多项属性，比如 elem 表示前正在执行动画的元素， start 和 end 分别为动画属性的第一个和最后一个的值， prop 为进行中的动画属性。

需要注意的是 step 函数被每个动画元素的每个动画属性调用。例如，给定两个列表项， step 函数会被激发四次：

Easing（缓动）

.animate() 还有一个参数是一个字符串命名的使用缓动函数。一个缓动函数指定用于动画进行中在不同点位的速度。在jQuery库中是默认的时调用 swing 。在一个恒定的速度进行动画，请调用 linear . 更多的缓动函数要使用的插件，最显着的是 jQuery UI suite （译者注：或 jQuery Easing Plugin 插件）。

Per-property Easing

从jQuery 1.4 版本开始，我们能设置per-property 缓存函数访问一个单独的 .animate() 。在 .animate() 的第一个版本中，每个属性能获取一个数组作为他的值：数组的第一个成员是CSS属性，第二成员缓冲函数。如果为某个属性指定的缓冲函数尚未被定义，那么将会使用 .animate() 方法的 easing 参数来代替。如果 easing 参数也未被定义，那么将会使用默认的缓冲函数 swing 。

例如, 我们可以同时的使用 swing 缓冲函数来做width 和 height动画，并且用 linear 缓冲函数来做opacity动画：

Additional Notes:（其他注意事项：）

所有的jQuery效果，包括


     .animate()

,能使用


     jQuery.fx.off = true

来全局性关闭。更多信息请查看 jQuery.fx.off .

Example: 点击按钮，根据指定的一系列属性，在 div 上应用动画。

<!DOCTYPE html>
<html>
<head>
  <style>
div {
background-color:#bca;
width:100px;
border:1px solid green;
}
</style>
  <script src="https://code.jquery.com/jquery-latest.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>

<!DOCTYPE html>
<html>
<head>
  <style>
div {
  position:absolute;
  background-color:#abc;
  left:50px;
  width:90px;
  height:90px;
  margin:5px;
}
</style>
  <script src="https://code.jquery.com/jquery-latest.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>

<!DOCTYPE html>
<html>
<head>
  <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-latest.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>

<!DOCTYPE html>
<html>
<head>
  <style>
div {
   position: relative;
   background-color: #abc;
   width: 40px;
   height: 40px;
   float: left;
   margin: 5px;
}
</style>
  <script src="https://code.jquery.com/jquery-latest.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:gt(0)" ).css( "left", now );
    }
  });
});
</script>
 
</body>
</html>