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

jQuery 效果 animate() 方法

jQuery 效果方法

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

动画使从一种CSS样式配置到另一种CSS样式配置的过渡动画成为可能。

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

除字符串“ show”，“ hide”和“ toggle”外，字符串值不能设置动画（例如，背景色）。这些值允许隐藏和显示动画元素。

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

除了样式属性，还可以对某些非样式属性（例如：scrollTop和scrollLeft）进行动画处理。

语法1：

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

语法2：

$(selector).animate({styles}, {options})

示例

通过更改元素的宽度来设置元素的动画：

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

通过更改元素的宽度和高度，使其具有动画效果：

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

通过传递多个样式属性和值来对元素进行动画处理：

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

使用带有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>");
  });
});
测试看看‹/›

使用备用语法指定多个动画{ styles}和{ options }：

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

用户滚动页面时添加平滑滚动：

let size = $(".main").height(); // 获取".main" 高度
$(window).keydown(function(event) {
  if(event.which === 40) { // 如果按下向下箭头键
    $("html, body").animate({scrollTop: "+=" + size}, 300);
  } else if(event.which === 38) { // 如果按下向上箭头键
    $("html, body").animate({scrollTop: "-=" + size}, 300);
  }
});
测试看看‹/›

使用相对值为所有段落设置动画：

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

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

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

参数值（语法1）

$(selector).animate({styles}, duration, easing, callback)
参数描述
styles必需。指定产生动画效果的一个或多个 CSS 属性/值。
注意：与animate()方法一起使用时，属性名称必须为驼峰式：是paddingTop而不是padding-top，marginLeft而不是margin-left以及依此类推
duration（可选）确定动画将运行多长时间的字符串或数字。预设值为400毫秒

可能的值：

  • 毫秒（例如100、500、2000等）

  • “fast”

  • “slow”

easing（可选）指定在动画的不同点中元素的速度。默认值是 "swing"。

可能的值：

  • “swing”-在开始/结束时移动较慢，而在中间移动较快

  • “linear”-以恒定速度移动

callback（可选）animate 函数执行完之后，要执行的函数。

参数值（语法2）

$(selector).animate({styles}, {options})
参数描述
styles必需。指定产生动画效果的一个或多个 CSS 属性/值（同上）。
options（可选）指定动画的额外选项

可选值：

  • duration 一个字符串或数字，确定动画将运行多长时间

  • easing 一个字符串，指示要在过渡中使用哪个缓动函数

  • complete -动画完成后要调用的函数

  • step -为每个动画元素的每个动画属性调用的函数

  • progress -在动画的每个步骤之后要执行的功能

  • queue-一个布尔值，指定是否将动画放置在效果队列中

  • specialEasing -来自styles参数的一个或多个CSS属性及其对应的缓动函数的映射

  • start -动画开始时要执行的功能

  • done -动画结束时要执行的功能

  • fail -如果动画无法完成，将执行的功能

  • always -如果动画停止但未完成则执行的功能

jQuery 效果方法

jQuery HTML/CSS 方法jQuery 效果方法