.animate()

Categories: Effects > Custom

.animate( properties, [ duration ], [ easing ], [ callback ] ) 返回： jQuery

描述： 执行一个CSS属性设置的自定义动画。

version added: 1.0.animate( properties, [ duration ], [ easing ], [ callback ] )

properties一组CSS属性，动画将朝着这组属性移动。

duration一个字符串或者数字决定动画将运行多久。

easing要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing"。

callback在动画完成时执行的函数。
version added: 1.0.animate( properties, options )

properties一组CSS属性，动画将朝着这组属性移动。

options一组包含动画选项的值的集合。支持的选项:
- duration: (默认值: "normal") 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)
- easing:(默认值: "swing") 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing"。
- complete: 在动画完成时执行的函数。
- step: 每步动画执行后调用的函数。
- queue: (默认值: true) 设定为false将使此动画不进入动画队列
- specialEasing:一组一个或多个通过相应的参数和相对简单函数定义的CSS属性 ( 1.4 新增).

.animate()方法允许我们在任意的数值的CSS属性上创建动画。唯一必要的属性就是一组CSS属性。这组属性类似用于设置.css()方法那一个，除了属性范围做了更多限制。

所有用于动画的属性必须是数字的（除了如下所示）；这些属性如果不是数字的将不能使用基本的jQuery功能。（举个例子，width, height或者left可以执行动画，但是background-color不能。）属性值被当作一个像素单位的数字,除非另有说明。单位em 和 %需要指定使用。

除了定义数值，每个属性能使用'show', 'hide', 和 'toggle'。这些快捷方式允许定制隐藏和显示动画用来考虑显示类型的元素。

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

Duration

持续时间是以毫秒为单位的；更高的值表示更慢的动画，不是更快的。'fast' 和 'slow'字符串被支持，分别表示持续时间为200 和 600毫秒。

Callback Function

如果提供回调函数，这个回调函数将在动画完成后被执行一次。这个能用来将不同的动画串联起来组成一个事件序列。这个回调函数不设置任何参数，但是this是存在动画的DOM元素，如果多个元素一起做动画效果，值得注意的是这个回调函数在每个匹配元素上执行一次，不是这个动画作为一个整体。

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

<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.
  });
});

注意我们这里给定了toggle作为height属性的目标值。由于这个图片开始是可见的，这个动画将收缩高度至0隐藏这个图片。第二次点击的时候将相反的转变：

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

在这个例子中，如果我们希望在left属性上做动画，那么这个元素的position属性必须不是static。

jQuery UI项目扩展了.animate()方法，允许一些非数值的样式比如颜色做动画。该项目还包括来指定动画通过CSS classes的机制而不是单独的属性（The project also includes mechanisms for specifying animations through CSS classes rather than individual attributes）。

Easing

.animate()的剩下的参数是一个字符串命名的使用缓冲函数。一个缓冲函数指定用于动画进行中在不同点位的速度。只有easing 在jQuery库中是默认的，called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

Per-property Easing

在jQuery 1.4 版本中，我们能设置per-property 缓存函数访问一个单独的.animate()。在.animate()的第一个版本中，每个属性能获取一个数组作为他的值：数组的第一个成员是CSS属性和第二成员缓冲函数。如果per-property 缓存函数没有定义一个特殊的属性，它就使用.animate() 方法的easing属性的这个值。如果easing属性不是默认的，这个函数就会默认使用swing。

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

$('#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缓冲函数来做width动画，并且用easeOutBounce缓冲函数来做height动画。

$('#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关闭全局性。更多信息请查看jQuery.fx.off.

例子：

Example: Click the button to animate the div with a number of different properties.

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

Demo:

Example: Shows a div animate with a relative move. Click several times on the buttons to see the relative animations queued up.

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

Demo:

Example: Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.

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

}, "slow");

Example: Animates all paragraph to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds.

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

Example: An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function. Note, this code will do nothing unless the paragraph element is hidden.

$("p").animate({
  "opacity": "show"

}, "slow", "easein");

Example: The first button shows how an unqueued animation works. It expands the div out to 90% width while the font-size is increasing. Once the font-size change is complete, the border animation will begin. The second button starts a traditional chained animation, where each animation will start once the previous animation on the element has completed.

<!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="http://code.jquery.com/jquery-latest.min.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>

Demo:

Example: Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.

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

}, { duration: "slow" });

Example: Animates all paragraph to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds. It also will do it outside the queue, meaning it will automatically start without waiting for its turn.

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

Example: An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function.

$("p").animate({
"opacity": "show"

}, { "duration": "slow", "easing": "easein" });

Example: An example of using a callback function. The first argument is an array of CSS properties, the second specifies that the animation should take 1000 milliseconds to complete, the third states the easing type, and the fourth argument is an anonymous callback function.

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

.animate()

.animate( properties, [ duration ], [ easing ], [ callback ] ) 返回： jQuery

version added: 1.0.animate( properties, [ duration ], [ easing ], [ callback ] )

version added: 1.0.animate( properties, options )

Duration

Callback Function

Easing

Per-property Easing

注意:

例子：

Example: Click the button to animate the div with a number of different properties.

Demo:

Example: Shows a div animate with a relative move. Click several times on the buttons to see the relative animations queued up.

Demo:

Example: Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.

Example: Animates all paragraph to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds.

Example: An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function. Note, this code will do nothing unless the paragraph element is hidden.

Demo:

Example: Animates all paragraphs to toggle both height and opacity, completing the animation within 600 milliseconds.

Example: Animates all paragraph to a left style of 50 and opacity of 1 (opaque, visible), completing the animation within 500 milliseconds. It also will do it outside the queue, meaning it will automatically start without waiting for its turn.

Example: An example of using an 'easing' function to provide a different style of animation. This will only work if you have a plugin that provides this easing function.

Example: An example of using a callback function. The first argument is an array of CSS properties, the second specifies that the animation should take 1000 milliseconds to complete, the third states the easing type, and the fourth argument is an anonymous callback function.