模拟动画的案例

        <script type="text/javascript">
/**
* @constructor Animate
* @param {HTMLElement} el the element we want to animate
* @param {String} prop the CSS property we will be animating
* @param {Object} opts a configuration object
* object properties include
* from {Int}
* to {Int}
* time {Int} time in milliseconds
* callback {Function}
*/
    function Animate(el, prop, opts) {
        this.el = el;
        this.prop = prop;
        this.from = opts.from;
        this.to = opts.to;
        this.time = opts.time;
        this.callback = opts.callback;
        this.animDiff = this.to - this.from;
    }
        /**
        * @private
        * @param {String} val the CSS value we will set on the property
        */
        Animate.prototype._setStyle = function(val) {
            switch (this.prop) {
                case 'opacity':
                    this.el.style[this.prop] = val;
                    this.el.style.filter = 'alpha(opacity=' + val * 100 + ')';
                    break;
                default:
                    this.el.style[this.prop] = val +'px';
                    break;
            };
        };
            /**
             * @private
             * this is the tweening function
             */
            Animate.prototype._animate = function() {
                var that = this;
                this.now = new Date();
                this.diff = this.now - this.startTime;
                if(this.diff > this.time) {
                    this._setStyle(this.to);
                    if(this.callback) {
                        this.callback.call(this);
                    }
                    clearInterval(this.timer);
                    return;
                }
                this.percentage = (Math.floor((this.diff / this.time) * 100) / 100);
                this.val = (this.animDiff * this.percentage) + this.from;
                this._setStyle(this.val);
            };

/**
* @public
* begins the animation
*/
    Animate.prototype.start = function() {
        var that = this;
        this.startTime = new Date();
        this.timer = setInterval(function() {
            that._animate.call(that);
        }, 4);
    };
/**
* @static
* @boolean
* allows us to check if native CSS transitions are possible
*/
    Animate.canTransition = function() {
        var el = document.createElement('twitter');
        el.style.cssText = '-webkit-transition: all .5s linear;';
        return !!el.style.webkitTransitionProperty;
    }();
        </script>

<script type="text/javascript">
            (function() {
                var blocking = false;
                document.getElementById('click').onclick = function(e) {
                    if(blocking) {
                        return false;
                    }
                    blocking = true;
                    var that = this;
                    var el = document.getElementById('test');
                    var from = this.className == 'animated' ? 1 : 0;
                    var to = from == 1 ? 0 : 1;
                    // relevant stuffs
                    if(Animate.canTransition) {
                        el.style.webkitTransition = 'opacity 0.5s ease-out';
                        el.style.opacity = to;
                        blocking = false;
                        that.className = that.className == 'animated' ? '' : 'animated';
                    } else {
                        new Animate(el, 'opacity', {
                            from : from,
                            to : to,
                            time : 500,
                            callback : function() {
                                that.className = that.className == 'animated' ? '' : 'animated';
                                blocking = false;
                            }
                        }).start();
                    }
                    return false;
                };
            })();
        </script>