您的位置：首页 > Web前端 > JQuery

jQuery中使用动画队列自定义动画

2017-01-05 13:45 501 查看

jQuery的queue()方法和dequeue()方法配合使用，可以完成对函数队列的操作。

实现步骤：

1、新建一个函数数组，把动画函数依次放进去；

2、调用queue()方法将动画函数数组加入队列中；

3、利用dequeue()方法取出函数队列中的第一个函数，并执行它。

示例：

<!DOCTYPE html>

<html>

<head>

<title>jQueryQueueTest.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">

$().ready(function(){

$(".flip").click(function(){//给flip类绑定click事件

var _slideFun =[

function(){

$(".panel").slideUp(1200,_takeOne);

},

function(){

$(".panel").fadeIn(1600,_takeOne);

}

];//创建一个有2个函数的函数数组

$(".panel").queue('slideList',_slideFun);//通过queue方法设置函数队列

var _takeOne = function(){

$(".panel").dequeue('slideList');

};//定义一个事件处理程序，该程序的功能是：从函数队列最前端移除一个队列函数，获取队列中的下一个函数执行

_takeOne();//执行函数队列中的下一个函数

});

});

</script>

<style type="text/css">

div.panel,p.flip

{

margin:0px;

padding:5px;

text_align:center;

background:#e5eecc;

border:solid 1px #c3c3c3;

}

div.panel

{

height:120px;

}

</style>

</head>

<body>

<div class="panel">

<p>动画队列效果</p>

</div>

<p class="flip">请点击这里</p>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html jquery 表单

相关文章推荐

新的分享

章节导航