jQuery animate() 方法

时间 2019-11-08

标签 jquery animate 方法栏目 JQuery 繁體版

原文原文链接

定义和用法

animate() 方法执行 CSS 属性集的自定义动画。

该方法经过 CSS 样式将元素从一个状态改变为另外一个状态。CSS属性值是逐渐改变的，这样就能够建立动画效果。

只有数字值可建立动画（好比 "margin:30px"）。字符串值没法建立动画（好比 "background-color:red"）。

提示：请使用 "+=" 或 "-=" 来建立相对动画。

语法

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

参数

参数	必需的	描述
styles	是	规定产生动画效果的一个或多个 CSS 属性/值。注意：当与 animate() 方法一块儿使用时，该属性名称必须是驼峰写法：您必须使用 paddingLeft 代替 padding-left，marginRight 代替 margin-right，依此类推。能够应用动画的属性： backgroundPositionX backgroundPositionY borderWidth borderBottomWidth borderLeftWidth borderRightWidth borderTopWidth borderSpacing margin marginBottom marginLeft marginRight marginTop outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop height width maxHeight maxWidth minHeight minWidth fontSize bottom left right top letterSpacing wordSpacing lineHeight textIndent 提示：颜色动画不包含在核心 jQuery 库中。若是您想要应用动画颜色，您须要从 jQuery.com 下载颜色动画插件。
speed	否	规定动画的速度。可能的值：毫秒 "slow" "fast"
easing	否	规定在动画的不一样点中元素的速度。默认值是 "swing"。可能的值： "swing" - 在开头/结尾移动慢，在中间移动快 "linear" - 匀速移动提示：扩展插件中提供更多可用的 easing 函数。
callback	否	animate 函数执行完以后，要执行的函数。如需学习更多有关 callback 的内容，请访问 jQuery Callback 。

实例

下例演示了animate()方法的简单用法; 它将<div>元素向右移动，直到它达到250px的left属性：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到蝴蝶教程</title>
//此版本是百度cdn 1.11.1，固然你能够使用更高的版本，从2.0版本以上的是不支持ie6-8的
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
     $(document).ready(function () {
       $("button").click(function(){
          $("div").animate({left: '250px'});
       });
     });
</script>
</head>
<body>
          <button>开始动画</button>    
          <p>默认状况下，全部的 HTML 元素有一个静态的位置，且是不可移动的。 
          若是须要改变为，咱们须要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
          <div style="background:#009688;height:100px;width:100px;position:absolute;"></div>      
</body>
</html>

jQuery animate() 方法

定义和用法

语法

参数

实例

相关知识