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

2017-01-05 20:15:00来源:CSDN作者:abvedu人点击

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>

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台