JQUERY自定义动画函数
2014-04-16 17:39
489 查看
自定义动画函数包括了所有动画效果的高级应用和高级技巧。
.animate() 执行自定义的动画效果。 返回jQuery
.stop() 停止匹配元素当前正在执行的动画效果。 返回jQuery
jQuery.fx.off 取消全部动画效果 Boolean
.queue() 根据函数签名不同，可以获取指定队列的函数集合(返回Array),或者操作某一个队列(返回jQuery)
.dequeue() 执行匹配元素指定队列中的下一个函数
.clearQueue() 清除队列中的所有未执行函数 返回jQuey
.delay() 延时执行队列中的函数 返回jQuey
1.jQuery队列
对一个元素调用动画函数时，会发现动画是按照顺序执行的：
$("#holder").hide(1000),fadeIn();
也许在一个jQuery链上顺序执行不奇怪，但是可以同时运行两次语句：
$("#holder").hide(1000),fadeIn();
$("#holder").hide(1000),fadeIn();
这时将会发现这四个动画函数都是排队顺序执行的！
如果没有队列，hide()函数和fadeIn()函数并不会
4000
彼此等待，而是立刻全部执行完毕，但是jQuery中的动画效果会排队作用在元素上，“排队”效果就是通过jQuery中的队列实现的。
在jQuery内部，所有的动画函数都会排列在名为"fx"的队列中。jquery中提供了下列和队列有关的函数
.queue([queueName]) queueName：为队列的名字，默认是动画队列的名字"fx" 返回指定名字队列的函数数组。
.queue([queueName],newQueue) queueName:队列的名字，默认是动画队列的名字"fx" newQueue：一个函数数组，用于替换queueName队列的内容 此函数用来替换指定的队列内容
.queue([queueName],callback(next)) queueName:队列的名字，默认是动画队列的名字"fx" callback(next):要添加到队列中的函数 为指定队列添加一个函数
.dequeue([queueName]) queueName:队列的名字，默认是动画队列的名字"fx" 执行指定队列中的某一个函数
.delay(duration, [queueName]) duration:字符串或数字，表示延时的时间 queueName:队列的名字，默认是动画队列的名字 “fx” 让某一个队列的执行延迟
jQuery中的queue和dequeue是一组很有用的方法，它们对于一系列需要按次序运行的函数特别有用。特别是animate自定义动画,ajax,以及timeout等需要一定时间执行的函数
[html]
view plaincopyprint?
<!DOCUTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
</head>
<body>
<button id="show">Go</button>
<div id="holder" style="position:relative; height:60px;">
<div id="myDiv" style="border:solid 1px #000000; width:50px; height:50px; position:absolute;">
会动的图层
</div>
</div>
<div id="divMsg" style="border:solid 1px; width:100px;">
[console]
</div>
<script>
function go(){
//alert($("#myDiv").queue.length);
$("#divMsg").html($("#myDiv").queue.length);
};
$("#show").click(function(e){
//执行一系列动画
$("#myDiv").show("slow",go);
$("#myDiv").slideToggle(1000,go);
$("#myDiv").slideToggle("fast",go);
$("#myDiv").animate({left:'200px'},1500,go);
$("#myDiv").hide("slow",go);
go();
});
</script>
</body>
</html>
队列实际上是一个函数数组，要获取队列中函数数组，上例中使用的是.queue([queueName])函数，其中queueName参数如果省略，则表示获取默认的动画队列fx.
可以通过.queue([queueName],newQueue)设置一个队列：
var myQueue = [
function(){alert("1"); go(); $(this).dequeue();},
function(){}
];
其中newQueue参数是一个函数数组；
除了传递函数数组替换全部队列，还可以为队列添加一个函数。比如：
$("#myImg").slideup();
$("#myImg").queue(function(){alert('add a function');$(this).dequeue();});
上面的代码等同于：
$("#myImg").slideUp(function(){alert('add a function'); $(this).dequeue();});
特别需要注意，添加的函数一定要执行dequeue()函数。dequeue() 函数相当于将当前队列中的最前面的一个函数取出，并执行。
下面会首先执行slideUp()函数滑动隐藏，然后显示提示语句，再执行slideDown()函数
$("#myImg").slideUp();
$("#myImg").queue(function(){alert('add a function'); $(this).dequeue();});
$("#myImg").slideDown();
如果将dequeue()函数去掉：
$("#myImg").slideUp();
$("#myImg").queue(function(){alert('add a function'); });
$("#myImg").slideDown();
在显示提示文字"add a function"后，slideDown()函数不再执行
在jQuery1.4版本后，当调用队列函数时，多了一个参数：
.queue([queueName],callback(next))
next参数是一个函数，调用next等同于手工调用dequeue()函数：
$("#myImg").slideUp();
$("#myImg").queue(function(next){alert('add a function'); next(); });
$("#myImg").slideDown();
在使用队列时，也常会使用delay()函数。delay()可以为某一个队列添加延时。
$("#myImg").slideUp().delay(1000).slideDown();
上面的例子中，当slideUp执行完毕后，会等待1秒钟，再执行slideDown()函数。
2.动画全局开关
jQuery提供了一个全局的属性
jQuery.fx.off
来关闭所有的动画效果。
3.停止元素动画
.stop([clearQueue], [jumpToEnd])
当stop()函数调用后，动画会停留在当时的状态上，并且动画的callback()回调函数也不会被调用
但是默认不带参数的stop()函数并不总是停止动画的运行。这是因为stop()函数会停止动画队列当前的函数，如果动画队列中还有函数的话，后面的函数会立刻执行
$("#myDiv").show("slow");
$("#myDiv").animate({left:'+=200'},2000);
$("#myDiv").animate({left:'-=200'},1500);
$("#myDiv").hide("slow");
在正常情况下，图层会运动到指定的位置，然后在返回。
但是如果在运动过程中，比如在
$("#myDiv").animate({left;'+=200'},2000);
过程中，运行：
$("#myDiv").stop();
会发现图层立刻向回移动，也就是开始执行：
$("#myDiv").animate({left:'-=200'},1500)
所以，如果希望stop()函数不仅仅停止当前动画，同时清楚队列时，可以传递clearQueue参数
$("#myDiv").stop(true,false);
4.自定义动画效果
animate()函数必须传递的参数只有一个：CSS属性集合。这个使用.css()函数时传递的集合是一样的，但是要求更严格。支持的CSS属性，必须要使用数字值。
所有指定的属性必须用骆驼形式，比如用marginLeft 代替margin-left
如果使用的是"hide" "show" "toogle"这样的字符串值，则会为该属性调用默认的动画形式：
另外属性值还可以是相对值。可以在数字前面添加"+="或"-="。"+="表示在当前值基础上增加，"-="表示在当前值基础上减少。
实现物体消散效果
$("#myDiv").animate({
"opacity": "hide",
"width" : $(window).width()-100,
"height": $(window).height()-100
},500)
[html]
view plaincopyprint?
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Chainable Transition Effects</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".run").click(function(){
$("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
.animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
.animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
.animate({top: "0"}, "fast")
.slideUp()
.slideDown("slow")
return false;
});
});
</script>
<style type="text/css">
body { margin: 20px auto; padding: 0; width: 580px; font: 80%/120% Arial, Helvetica, sans-serif; }
a { font-weight: bold; color: #000000; }
#box { background: #6699FF; height: 100px; width: 100px; position: relative; }
</style>
</head>
<body>
<p><a href="#" class="run">Run</a></p>
<div style="opacity: 1; left: 0px; top: 0px; height: 100px; display: block; width: 100px;" id="box"> </div>
</body>
</html>
.animate() 执行自定义的动画效果。 返回jQuery
.stop() 停止匹配元素当前正在执行的动画效果。 返回jQuery
jQuery.fx.off 取消全部动画效果 Boolean
.queue() 根据函数签名不同，可以获取指定队列的函数集合(返回Array),或者操作某一个队列(返回jQuery)
.dequeue() 执行匹配元素指定队列中的下一个函数
.clearQueue() 清除队列中的所有未执行函数 返回jQuey
.delay() 延时执行队列中的函数 返回jQuey
1.jQuery队列
对一个元素调用动画函数时，会发现动画是按照顺序执行的：
$("#holder").hide(1000),fadeIn();
也许在一个jQuery链上顺序执行不奇怪，但是可以同时运行两次语句：
$("#holder").hide(1000),fadeIn();
$("#holder").hide(1000),fadeIn();
这时将会发现这四个动画函数都是排队顺序执行的！
如果没有队列，hide()函数和fadeIn()函数并不会
4000
彼此等待，而是立刻全部执行完毕，但是jQuery中的动画效果会排队作用在元素上，“排队”效果就是通过jQuery中的队列实现的。
在jQuery内部，所有的动画函数都会排列在名为"fx"的队列中。jquery中提供了下列和队列有关的函数
.queue([queueName]) queueName：为队列的名字，默认是动画队列的名字"fx" 返回指定名字队列的函数数组。
.queue([queueName],newQueue) queueName:队列的名字，默认是动画队列的名字"fx" newQueue：一个函数数组，用于替换queueName队列的内容 此函数用来替换指定的队列内容
.queue([queueName],callback(next)) queueName:队列的名字，默认是动画队列的名字"fx" callback(next):要添加到队列中的函数 为指定队列添加一个函数
.dequeue([queueName]) queueName:队列的名字，默认是动画队列的名字"fx" 执行指定队列中的某一个函数
.delay(duration, [queueName]) duration:字符串或数字，表示延时的时间 queueName:队列的名字，默认是动画队列的名字 “fx” 让某一个队列的执行延迟
jQuery中的queue和dequeue是一组很有用的方法，它们对于一系列需要按次序运行的函数特别有用。特别是animate自定义动画,ajax,以及timeout等需要一定时间执行的函数
[html]
view plaincopyprint?
<!DOCUTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
</head>
<body>
<button id="show">Go</button>
<div id="holder" style="position:relative; height:60px;">
<div id="myDiv" style="border:solid 1px #000000; width:50px; height:50px; position:absolute;">
会动的图层
</div>
</div>
<div id="divMsg" style="border:solid 1px; width:100px;">
[console]
</div>
<script>
function go(){
//alert($("#myDiv").queue.length);
$("#divMsg").html($("#myDiv").queue.length);
};
$("#show").click(function(e){
//执行一系列动画
$("#myDiv").show("slow",go);
$("#myDiv").slideToggle(1000,go);
$("#myDiv").slideToggle("fast",go);
$("#myDiv").animate({left:'200px'},1500,go);
$("#myDiv").hide("slow",go);
go();
});
</script>
</body>
</html>
队列实际上是一个函数数组，要获取队列中函数数组，上例中使用的是.queue([queueName])函数，其中queueName参数如果省略，则表示获取默认的动画队列fx.
可以通过.queue([queueName],newQueue)设置一个队列：
var myQueue = [
function(){alert("1"); go(); $(this).dequeue();},
function(){}
];
其中newQueue参数是一个函数数组；
除了传递函数数组替换全部队列，还可以为队列添加一个函数。比如：
$("#myImg").slideup();
$("#myImg").queue(function(){alert('add a function');$(this).dequeue();});
上面的代码等同于：
$("#myImg").slideUp(function(){alert('add a function'); $(this).dequeue();});
特别需要注意，添加的函数一定要执行dequeue()函数。dequeue() 函数相当于将当前队列中的最前面的一个函数取出，并执行。
下面会首先执行slideUp()函数滑动隐藏，然后显示提示语句，再执行slideDown()函数
$("#myImg").slideUp();
$("#myImg").queue(function(){alert('add a function'); $(this).dequeue();});
$("#myImg").slideDown();
如果将dequeue()函数去掉：
$("#myImg").slideUp();
$("#myImg").queue(function(){alert('add a function'); });
$("#myImg").slideDown();
在显示提示文字"add a function"后，slideDown()函数不再执行
在jQuery1.4版本后，当调用队列函数时，多了一个参数：
.queue([queueName],callback(next))
next参数是一个函数，调用next等同于手工调用dequeue()函数：
$("#myImg").slideUp();
$("#myImg").queue(function(next){alert('add a function'); next(); });
$("#myImg").slideDown();
在使用队列时，也常会使用delay()函数。delay()可以为某一个队列添加延时。
$("#myImg").slideUp().delay(1000).slideDown();
上面的例子中，当slideUp执行完毕后，会等待1秒钟，再执行slideDown()函数。
2.动画全局开关
jQuery提供了一个全局的属性
jQuery.fx.off
来关闭所有的动画效果。
3.停止元素动画
.stop([clearQueue], [jumpToEnd])
当stop()函数调用后，动画会停留在当时的状态上，并且动画的callback()回调函数也不会被调用
但是默认不带参数的stop()函数并不总是停止动画的运行。这是因为stop()函数会停止动画队列当前的函数，如果动画队列中还有函数的话，后面的函数会立刻执行
$("#myDiv").show("slow");
$("#myDiv").animate({left:'+=200'},2000);
$("#myDiv").animate({left:'-=200'},1500);
$("#myDiv").hide("slow");
在正常情况下，图层会运动到指定的位置，然后在返回。
但是如果在运动过程中，比如在
$("#myDiv").animate({left;'+=200'},2000);
过程中，运行：
$("#myDiv").stop();
会发现图层立刻向回移动，也就是开始执行：
$("#myDiv").animate({left:'-=200'},1500)
所以，如果希望stop()函数不仅仅停止当前动画，同时清楚队列时，可以传递clearQueue参数
$("#myDiv").stop(true,false);
4.自定义动画效果
animate()函数必须传递的参数只有一个：CSS属性集合。这个使用.css()函数时传递的集合是一样的，但是要求更严格。支持的CSS属性，必须要使用数字值。
所有指定的属性必须用骆驼形式，比如用marginLeft 代替margin-left
如果使用的是"hide" "show" "toogle"这样的字符串值，则会为该属性调用默认的动画形式：
另外属性值还可以是相对值。可以在数字前面添加"+="或"-="。"+="表示在当前值基础上增加，"-="表示在当前值基础上减少。
实现物体消散效果
$("#myDiv").animate({
"opacity": "hide",
"width" : $(window).width()-100,
"height": $(window).height()-100
},500)
[html]
view plaincopyprint?
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Chainable Transition Effects</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".run").click(function(){
$("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
.animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
.animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
.animate({top: "0"}, "fast")
.slideUp()
.slideDown("slow")
return false;
});
});
</script>
<style type="text/css">
body { margin: 20px auto; padding: 0; width: 580px; font: 80%/120% Arial, Helvetica, sans-serif; }
a { font-weight: bold; color: #000000; }
#box { background: #6699FF; height: 100px; width: 100px; position: relative; }
</style>
</head>
<body>
<p><a href="#" class="run">Run</a></p>
<div style="opacity: 1; left: 0px; top: 0px; height: 100px; display: block; width: 100px;" id="box"> </div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery.animate自定义动画的函数
- jQuery自定义动画函数实例详解(附demo源码)
- jquery自定义动画的函数切换函数
- JQUERY自定义动画函数
- jquery 之 $().animate(params, option) 自定义动画函数
- jQuery自定义动画函数animate() easing: "easeInOutCirc"导致的animate（）动画抖动问题解决方法
- jQuery自定义动画函数实例详解(附demo源码)
- jquery自定义函数与参数
- jQuery动画高级用法（上）——详解animation中的.queue()函数 http://www.cnblogs.com/hh54188/archive/2011/04/09/1996469.
- jQuery中常用动画效果函数(日常整理)
- jQuery动画高级用法——详解animation中的.queue()函数
- jQuery中添加自定义或函数方法
- jquery动画函数队列
- jQuery动画高级用法（上）——详解animation中的.queue()函数
- jQuery中使用动画队列自定义动画
- jquery 动画效果函数
- jQuery之动画效果（动画基础隐藏和显示,上卷下拉效果 ,淡入淡出效果 ,动画切换的比较,自定义动画,jQuery核心）
- 关于jQuery中自定义函数的操作
- jQuery 自定义函数写法分享
- jQuery 自定义函数写法分享