jQuery 队列控制函数:.queue()

.queue() 显示或操作匹配元素所执行函数的队列。 

所以它和那些常见的animate()、fadeIn()、fadeOut()、slideUp()、show()、hide()动画函数,有什么区别?

如果说,

$('#foo').slideUp().fadeIn();

当这条语句执行时,元素会立即开始其滑动动画,但是淡入过渡被置于 fx 队列,只有当滑动过渡完成后才会被调用。

这句话意思是,动画会先开始执行滑动,再进行淡入过渡。

那么用了queue()方法,能产生什么不一样的效果?

.queue() 方法允许我们直接对这个函数队列进行操作。调用带有回调函数的 .queue() 方法特别有用;它允许我们在队列末端放置一个新函数。

这个特性与动画方法提供回调函数类似,但是无需在动画执行时设置回调函数。

如果要执行的函数不仅仅是动画,还有文档操作比如append(),css属性操作呢。

来试验个最简单的。

复制代码
<style>

div {width:40px; height:40px;
background:green; }

.newcolor { background:blue; }
</style>
<body>
<div> </div>
<script>
$(document.body).click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").addClass("newcolor"); 
    });
</script>
</body>
复制代码

这个动画按照设定,是要这个 div 先缓缓出现,向右滑动,再执行css属性操作,改变背景颜色为蓝色。

然而这样写的结果,实际上是 div在出现前已经变成了蓝色。

因为一系列的动画函数会被放进一个队列中,我们管他叫 'fx', 而非动画函数,不会进入这个队列,它会先于队列函数执行。

而queue()就是来解决这个问题的。

queue()可以将非动画函数加进队列,确保队列最后一项执行完成后再执行添加到队列的函数

复制代码
  <style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px; 
        background:green; display:none; }
  div.newcolor { background:blue; }
  </style>

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

<body>

  请点击这里 ...
  <div></div>

<script>$(document.body).click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").queue(function () {
        $(this).addClass("newcolor");
        $(this).dequeue();
      });
      $("div").animate({left:'-=200'},500);
      $("div").queue(function () {
        $(this).removeClass("newcolor");
        $(this).dequeue();
      });
      $("div").slideUp();
    });</script>

</body>
复制代码

OK,这样就达到了我们要的效果。

再看上面那句话:

调用带有回调函数的 .queue() 方法特别有用;它允许我们在队列末端放置一个新函数。

这个特性与动画方法提供回调函数类似,但是无需在动画执行时设置回调函数。

语法: .queue(queueName,newQueue)

我们加入的函数其实是一个关于队列的回调函数。这个回调函数可以放在动画函数里,作为动画函数的回调函数。

比如,queue队列函数:

$('#foo').slideUp();
$('#foo').queue(function() {
  alert('Animation complete.');
  $(this).dequeue();
});

等价于:

$('#foo').slideUp(function() {
  alert('Animation complete.');
});

好吧,总算理解了。

 

posted @   kiera  阅读(348)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥
点击右上角即可分享
微信分享提示