jQuery API .animate()

最新推荐文章于 2024-01-18 09:17:27 发布

依然那么楞

最新推荐文章于 2024-01-18 09:17:27 发布

阅读量1k

点赞数

文章标签： jquery api animate

本文链接：https://blog.csdn.net/ling811/article/details/17682133

版权

.animate()

.animate(properties[,duration][,easing][,complete])

描述: 根据一组 CSS 属性，执行自定义动画。

properties

类型: PlainObject

一个CSS属性和值的对象,动画将根据这组对象移动。
duration (默认: 400)

类型: Number or String

一个字符串或者数字决定动画将运行多久。（愚人码头注：默认值: "normal"，三种预定速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如：1000) ）
easing (默认: swing)

类型: String

一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 "swing"）
complete

类型: Function()

在动画完成时执行的函数。

.animate(properties,options)

properties

类型: PlainObject

一个CSS属性和值的对象,动画将根据这组对象移动。
options

类型: PlainObject

一组包含动画选项的值的集合。支持的选项:
- duration (default: 400)
  
  Type: Number or String
  
  一个字符串或者数字决定动画将运行多久。（愚人码头注：默认值: "normal"，三种预定速度的字符串("slow", "normal", 或 "fast")或表示动画时长的毫秒数值(如：1000) ）
- easing (default: swing)
  
  Type: String
  
  一个字符串，表示过渡使用哪种缓动函数。（愚人码头注：jQuery自身提供"linear" 和 "swing"，其他效果可以使用 jQuery Easing Plugin插件）
- queue (default: true)
  
  Type: Boolean or String
  
  一个布尔值，指示是否将动画放置在效果队列中。如果为false时，将立即开始动画。 从jQuery1.7开始，队列选项也可以接受一个字符串，在这种情况下，在动画被添加到由该字符串表示的队列中。当一个自定义的队列名称被使用，动画不会自动启动;你必须调用 .dequeue("queuename")来启动它。
- specialEasing
  
  Type: PlainObject
  
  由此方法的第一个参数properties定义的一个或多个CSS属性，及其相应的缓动函数组成的键值对map。( 1.4 新增)
- step
  
  Type: Function( Number now, Tween tween )
  
  每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。
- progress
  
  Type: Function( Promise animation, Numberprogress, Number remainingMs )
  
  每一步动画完成后调用的一个函数，无论动画属性有多少，每个动画元素都执行单独的函数。 (version added: 1.8)
- complete
  
  Type: Function()
  
  在动画完成时执行的函数。
- done
  
  Type: Function( Promise animation, BooleanjumpedToEnd )
  
  在动画完成时执行的函数。 (他的Promise对象状态已完成). (version added: 1.8)
- fail
  
  Type: Function( Promise animation, BooleanjumpedToEnd )
  
  动画失败完成时执行的函数。(他的Promise对象状态未完成)。 (version added: 1.8)
- always
  
  Type: Function( Promise animation, BooleanjumpedToEnd )
  
  在动画完成或未完成情况下停止时执行的函数。(他的Promise对象状态已完成或未完成)。 (version added: 1.8)

例子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
 <script src="jquery-1.10.2.js"></script>
 <style> 
     #clickme{ width:50px; height:30px; border:1px solid #0F0; text-align:center}
 </style>
</head>

<body>
<div id="clickme">
    点击
</div>
<img src="psb.jpg" id="book" alt="" width="142" height="139" style="position:relative; left:10px; " />
<!--同时对透明度，左偏移值和高度应用动画：-->
<script>
    $('#clickme').click(function(){
        $('#book').animate({
            opacity:0.25,
            left: '+=50',
            height: 'toggle'
        }, 5000,function(){
            // Animation complete.
        })
    })
</script>
</body>
</html>

效果图：

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

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

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

例子:

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
 <script src="jquery-1.10.2.js"></script>
 <style> 
	div{ background:#BCA; width:100px; border:1px solid #0F0;}
 </style>
</head>

<body>
<button id="go">»运行</button>
<div id="block"> Hello!</div>
<script>
	$("#go").click(function(){
		$("#block").animate({
			width: "70%",
			opacity:0.4,
			marginLeft:"0.6in",
			fontSize:"3em",
			borderWidth:"10px",
		},1500)
	})
</script>
</body>
</html>

效果图：

更多参考：http://api.jquery.com/animate/

依然那么楞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery API .animate()

.animate().animate(properties[,duration][,easing][,complete])描述: 根据一组 CSS 属性，执行自定义动画。properties类型: PlainObject一个CSS属性和值的对象,动画将根据这组对象移动。duration (默认: 400)类型: Number or S
复制链接

扫一扫