关于jQuery动画API

jQuery 主要的动画控制API

1 .show()
2 .hide()
3 .slideUp
4 .slideDown
5 .slideToggle
6 .fadeIn
7 .fadeOut
8 .animate

如上函数如何使用?演示使用方式


.hide()

.hide([duration ] [,easing ] [,complete ])
用于隐藏元素,没有参数的时候等同于直接设置display属性,当我们给hide设置事件时:hide(2000)会有一个消失的过程
示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
div {
background:#ccc;
width: 100px;
height: 100px;
border: 1px solid;
}
</style>
</head>
<body>
<div>
</div>
</body>
<script>
$('div').hide() // == $('.target').css('display', 'none')
</script>

.show()

.show( [duration ] [, easing ] [, complete ] )
用于显示元素,用法和hide类似给显示元素设置一个现实的时间

1
2
$('div').hide(2000)  // 隐藏时间为2s
$('div').show(2000) //显示时间为2s

.slideUp

.slideUp( [duration ] [, easing ] [, complete ] )
用滑动动画隐藏一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面的下面部分滑上去,当一个隐藏动画后,高度值达到0的时候,display 样式属性被设置为none,以确保该元素不再影响页面布局。
效果:(代码基于hide)

1
$('div').slideUp()

.slideDown

用滑动动画显示一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面的下面部分滑下去,弥补了显示的方式
效果:(代码基于slideUp)


.slideToggle

用滑动动画显示或隐藏一个匹配元素,方法将给匹配元素的高度的动画,这会导致页面中,在这个元素下面的内容往下或往上滑。display属性值保存在jQuery的数据缓存中,所以display可以方便以后可以恢复到其初始值。

如果一个元素的display属性值为inline,然后是隐藏和显示,这个元素将再次显示inline。当一个隐藏动画后,高度值达到0的时候,display 样式属性被设置为none,以确保该元素不再影响页面布局。

效果:
连续调用两次,和使用.slideUp()、.slideDown效果相同


.fadeIn

.fadeIn( [duration ] [, easing ] [, complete ] )
通过淡入的方式显示匹配元素,参数含义和上面相同
给div的css属性设置display:none

$(‘div’).fadeIn(2000)


.fadeOut

.fadeOut( [duration ] [, easing ] [, complete ] )
通过淡出的方式隐藏匹配元素
取消div的css中的display:none


上面几个简单的动画不能满足需求的时候,jquery提供了自定义动画行为的方法

.animate

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

1
2
3
4
5
<div id="clickme">
Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123"
style="position: relative; left: 10px;">
1
2
3
4
5
6
7
8
9
$( "#clickme" ).click(function() {
$( "#book" ).animate({
opacity: 0.25, // 图片透明度 渐变
left: "+=50", //向左移动距离 -- 原基础上+50px;
height: "toggle" //
}, 5000, function() {
// Animation complete.
});
});

height属性的目标值是’toggle’。由于之前图像是可见的,因此动画会将高度缩小为0以隐藏它。第二次点击然后反转此转换


jQuery动画队列

jQuery提供了以下几种方法来操作动画队列。

  • stop([clearQuery],[gotoEnd]):停止当前jQuery对象里每个DOM元素上正在执行的动画。

  • queue([queueName,]callback):将callback动画数添加到当前jQuery对象里所有DOM元素的动画函数队列的尾部。

  • queue([queueName,]naeQueue):用newQueue动画函数队列代替当前jQuery对象里所的DOM元素的动画函数队列。

  • dequeue():执行动画函数队列头的第一个动画函数,并将该动画函数移出队列。

  • clearQueue([queueName]):清空动画函数队列中的所有动画函数。可选的 callback 参数是动画完成后所执行的函数名称。

例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<style>  
div {
width: 60px;
height: 60px;
position:absolute;
top:60px;
background: #f0f;
display:none;
}
</style>
</head>
<body>
<script type="text/javascript" src="../jquery-1.8.0.js">
</script>
<p>动画队列的长度是:<span></span></p>
<div></div>
<script type="text/javascript">
var div = $("div");
function runIt()
{
// 第1个动画:显示出来
div.show("slow");
// 第2个动画:自动动画,水平左移300px
div.animate({left:'+=300'},2000);
// 第3个动画:卷起来
div.slideToggle(1000);
// 第4个动画:放下来
div.slideToggle("fast");
// 第5个动画:自动动画,水平右移300px
div.animate({left:'-=300'},1500);
// 第6个动画:隐藏出来
div.hide("slow");
// 第7个动画:显示出来
div.show(1200);
// 第8个动画:卷起来,动画完成后回调runIt
div.slideUp("normal", runIt);
}
// 控制每0.1秒调用一次该方法,该方法用于显示动画队列的长度
function showIt()
{
var n = div.queue();
$("span").text(n.length);
setTimeout(showIt, 100);
}
runIt();
showIt();
</script>