用队列模拟jquery的动画算法实例(2)

return self = {
            //增加队列
            add: function(element, options) {
                //这里是整个算法的关键
                //相当于往数组中添加一个函数
                //[function(func){},...]
                //也就是_fire中的onceRun方法，func也就是在那时传进去的。
                //在Aaron的编程中很喜欢用这种技巧，比如预编译什么的。
                Queue.push(function(func) {
                    makeAnim(element, options, func);
                });

//如果有一个队列立刻触发动画
                if (first && Queue.length) {
                    //这个开关很好的起到了控制后面添加的元素进行排队的作用
                    first = false;
                    //这里等价于直接运行_fire();
                    //Aaron喜欢装A，故意添加一个self.fire出来，或许他是深谋远虑
                    self.fire();
                }
            },
            //触发
            fire: function() {
                _fire();
            }
        }
    }();

aQuery.fn = aQuery.prototype = {
        run: function(options) {
            animation.add(this.element, options);
            return this;
        }
    }

var init = aQuery.fn.init = function(selector) {
        var match = rquickExpr.exec(selector);
        var element = document.getElementById(match[1])
        this.element = element;
        return this;
    }
    //差点小看了这一行代码
    //jquery的样子学的不错
    //直接aQuery.fn.init = aQuery.fn不是更好?
    //多一个init变量无非是想减少查询罢了，优化的思想无处不在。
    init.prototype = aQuery.fn;
    return aQuery;
}());

//dom
var oDiv = document.getElementById('div1');
 
//调用
oDiv.onclick = function() {

$('#div1').run({
        'width': '500'
    }).run({
        'width': '300'
    }).run({
        'width': '1000'
    });
};

附上html就可以自己调式了。要记得用chrome浏览哦。

复制代码 代码如下:

<div data-mce-style="width: 100px; height: 50px; background: red; cursor: pointer; color: #fff; text-align: center; line-height: 50px;">点击</div>