zoukankan      html  css  js  c++  java
  • jquery中利用队列依次执行动画

    如果有5个隐藏的div,要让它们依次显示,通常的做法是要一个一个嵌套在回调函数里面,这样导致代码看起来非常不直观。

    $("#div1").slideDown(1000,function(){
       $("#div2").slideDown(1000,function(){

        ...

        ...

       });

    });

    这个情况下,就可以使用队列,此时需要借助一个辅助对象,假设是$("#queueHelper"):

            var divs = $("div");
            var a=0;
            divs.hide();
    
            for (var i = 0; i < divs.length; i++) {
                $("#queueHelper").queue("myLists",function () {
                    divs.eq(a++).slideDown(500 , DoNext); //回调函数统一为DoNext
                });
            }
            
            function DoNext(){
                $("#queueHelper").dequeue("myLists");
            }
    
            DoNext();

    它思路就是找到一个辅助对象,向它一次性插入需要执行的动作,然后再一次性取出来。

    在插入队列的时候,只是把方法保存进去。而等到出列的时候,才开始真正执行,并且是等待前一个方法执行完,才会执行后一个方法。

    辅助对象的目的就是为了把所有函数都集中到同一个队列上,甚至可以直接用$("#div1")或者$(document)作为辅助对象,便于出列时统一对辅助对象操作。

  • 相关阅读:
    First duplicate value
    SQL学习笔记day1
    Find closest value in BST
    BST construction
    Closest sum_pair
    滑动窗口 sliding window
    设计模式(3)观察者模式
    设计模式(1)装饰模式总结
    深刻探讨public class=new class();
    与时间赛跑,我的2012
  • 原文地址:https://www.cnblogs.com/dengshaojun/p/4171378.html
Copyright © 2011-2022 走看看