欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

浅谈jquey 中queue队列

程序员文章站 2022-04-27 17:57:47
...

首先来一张w3c对queue用法介绍
浅谈jquey 中queue队列
            
    
    博客分类: javascript jqueryqueue动画队列 
 

恩,好像是这个样子,在queue出场之前先谈谈jquery链式操作,举个栗子:

$('#div1').animate({
                  top:'50px',
                  left:'100px'
            },'slow').css({
                 width:'300px',
                 height:'300px'
            }).fadeOut();

 这段代码很简单,那么它的效果是怎样的呢?首先div1同时向上移动50px,向左移动100px--->宽度和高度变为300px----->最后消失...

    真的是这样吗?动手运行一下,细心的童鞋就会发现 它先宽度和高度变为300px,然后才是向上向左移动,最后消失。原因在于jquery链式操作队列,只有动画才被依次加入到这个队列中去,像toggle,show,hide,fadeIn,fadeOut...这些动画效果才会被按顺序依次执行。问题来了,非动画函数也想加入这个队列依次执行该怎么办?

   queue闪亮登场浅谈jquey 中queue队列
            
    
    博客分类: javascript jqueryqueue动画队列 ,duang

$('#div1').animate({
                  top:'50px',
                  left:'100px'
            },'slow')
.queue(function(){
      $(this).css({
                 width:'300px',
                 height:'300px'
            });
     //保证余下队列继续执行
    $(this).dequeue();
}).fadeOut();

 这样就会按照我们的想法运动了。。

顺便提一下dequeue,当调用 .dequeue() 时,会从序列中删除下一个函数,然后执行它。该函数反过来会(直接或间接地)引发对 .dequeue() 的调用,这样序列才能继续下去。

不是总结的总结:

1,用queue把函数加入队列(通常是函数数组)
2,用dequeue将函数数组中的第一个函数取出,并执行(用shift()方法取出并执行)

 

 

  • 浅谈jquey 中queue队列
            
    
    博客分类: javascript jqueryqueue动画队列 
  • 大小: 31.2 KB