返回顶部下载帮助
网站模板
模板颜色分类:
当前位置: javascript学习 >

jquery队列教程

2020-04-15 文章标签: jquery 队列 浏览次数:

我们继续讲解jquery处理队列,比如使用jquery添加队列,jquery显示队列,jquery更新队列,jquery删除队列

1.jpg

我们看看看什么是队列:排队在jQuery中用于动画。你可以把它们用于你喜欢的任何目的。他们是函数数组存储在每个元素的基础上,使用jQuery.data()..他们是先进先出(FIFO).可以通过调用.queue(),然后使用以下方法删除(通过调用)函数.dequeue().我们通过代码来加强认识

1.jquery添加队列

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
    var  $div = $("div");
    $("input").click(function(){
          $div.slideDown("slow");
          $div.animate({left:'+=400'},2000);
          $div.queue(function(){    //在队列的末尾添加一个函数
              $(this).addClass("bg"); //调用该回调函数之后动画将停止
          });
          $div.animate({left:'-=400'},2000);
          $div.queue(function(){
              $(this).removeClass("bg");
          });
          $div.slideUp("slow");
    });
})
</script>
<style type="text/css">
.bg { background:blue; }
div { position:absolute; width:50px; height:50px; background:red; left:0; top:50px; display:none; }
</style>
</head>
<body>
<input type="button" value="动画演示" />
<div></div>
</body>
</html>

2.jquery显示队列

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
    var  $div = $("div");
    $("input").click(function(){
          $div.slideDown("slow");
          $div.animate({left:'+=400'},2000);
          $div.animate({left:'-=400'},2000);
          $div.slideUp("slow");
          var x = $div.queue();    //获取div元素默认的队列fx
          alert(x.length);    //显示fx队列包含4个函数成员
    });
})
</script>
</head>
<body>
<input type="button" value="动画演示" />
<div></div>
</body>
</html>

3.jquery更新队列

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
    var  $div = $("div");
    $("input").eq(0).click(function(){    //默认的第一个动画序列,慢速动画
        $div.slideDown("slow");
        $div.animate({left:'+=400'},4000);
        $div.animate({left:'-=400'},4000);
        $div.slideUp("slow");
    });
    $div.queue("fa",function(){    //自定义动画序列,快速动画
        $div.slideDown("fast"); 
        $div.animate({left:'+=400'},200),
        $div.animate({left:'-=400'},200)
        $div.slideUp("fast ");
    });
    var fa = $div.queue("fa");    //获取对自定义动画序列的引用
    $("input").eq(1).click(function(){
          $div.queue("fx",fa);    //使用fa动画序列覆盖默认的fx动画序列
    });    
})
</script>
<style type="text/css">
.bg { background:blue; }
div { position:absolute; width:50px; height:50px; background:red; left:0; top:50px; display:none; }
</style>
</head>
<body>
<input type="button" value="执行慢速演示" />
<input type="button" value="更新动画,执行快速演示" />
<div></div>
</body>
</html>

4.jquery删除队列

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" >
$(function(){
    var  $div = $("div");
    $("input").click(function(){
          $div.slideDown("slow");
          $div.animate({left:'+=400'},2000);
          $div.queue(function(){
              $(this).addClass("bg");
              $(this).dequeue();
          });
          $div.animate({left:'-=400'},2000);
          $div.queue(function(){
              $(this).removeClass("bg");
              $(this).dequeue();    //删除最顶部的函数,并继续执行队列
          });
          $div.slideUp("slow");
    });
})
</script>
<style type="text/css">
.bg { background:blue; }
div { position:absolute; width:50px; height:50px; background:red; left:0; top:50px; display:none; }
</style>
</head>
<body>
<input type="button" value="动画演示" />
<div></div>
<div></div>
</body>
</html>


关于我们 - 联系我们 - 广告服务 - 友情链接 - 版权声明 - 手机版

免责声明:站内所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!版权归原创者所有,如果侵犯了您的权益,请通知我们,我们会及时删除侵权内容。