最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用的时候还去翻API
queue()/ dequeue()
这两个方法就像Ajax的XMLHttpRequest对象一样的隐蔽,不为常人所知。这两个方法在动画处理的时候很有用,我们经常会写一些这样的代码
$('#test').animate({
"width": "300px",
"height": "300px",
"opacity":"1"
});
这样test div的height、width、opacity是同时变化的,有时候我们不希望同步执行,而是形状的变化和透明度的变化分开,先变成300*300的div,然后透明度再逐渐变化,我们需要这么写
$('#test').animate({
"width": "300px",
"height": "300px",
}, function () {
$('#test').animate({ "opacity": "1" });
});
同学们可以想象一下要是有十个动画流程,那代码是什么样的,queue()和dequeue()可以解决此类问题,为所有的流程方法见一个队列,让function依次调用,先看一下语法
queue( [queueName ], newQueue ) 操作欲执行队列方法
第一个参数是队列名称,不写的话默认是fx
第二个参数可以是一个函数数组,存放所有队列函数,也可以是一个回掉函数,用于向队列中添加新函数
dequeue( [queueName ] ) 为匹配元素执行队列中的下一个function
每次调用此方法执行队列中下一函数
var q = [
function () {
$(this).animate({
"width": "200px",
"height":"200px"
}, next)
},
function () {
$(this).animate({
"width": "400px",
"height": "400px"
}, next);
}
];
function next(){
$('#test').dequeue('myQueue');
}
$('#test').queue('myQueue', q);
next();
上面代码就是可以让test div先变成200*200的,然后再变为400*400的,每个动画都执行回掉函数,调用队列中下一个方法,两个动画依次执行.
转自:http://www.cnblogs.com/dolphinX/p/3330174.html
PS:只转了原文的前半部分
参考:http://blog.sina.com.cn/s/blog_6d3f840a0101mmok.html
html代码:
<html>
<head>
<meta charset="UTF-8">
<script src="jquery.js"></script>
</head>
<body>
<div style="width:100px;height:100px;background:rgb(255,0,0);" id="test" >
</div>
</body>
<script type="text/javascript">
var q = [
function () {
$(this).animate({
"width": "200px",
"height":"200px"
}, next)
},
function () {
$(this).animate({
"width": "400px",
"height": "400px"
}, next);
}
];
function next(){
$('#test').dequeue('myQueue');
}
$('#test').queue('myQueue', q);
next();
</script>
</html>