JQUERY自定义动画函数

最新推荐文章于 2020-09-15 22:04:31 发布

ft2166826

最新推荐文章于 2020-09-15 22:04:31 发布

阅读量623

点赞数

分类专栏： html/div/css

html/div/css 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

自定义动画函数包括了所有动画效果的高级应用和高级技巧。

.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();

这时将会发现这四个动画函数都是排队顺序执行的！
如果没有队列，hide()函数和fadeIn()函数并不会彼此等待，而是立刻全部执行完毕，但是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 plain copy print ?

<!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 plain copy print ?

<!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>