Animation

Animation

(function ($) {
    function active(target, index) {
        var actions = $(target).data('actions');
        if (index < actions.length) {
            var callee = arguments.callee;
            var action = actions[index];
            if (!$(target).data('stop')) {
                if (action.action(action.context) !== false) {
                    var timer = setTimeout(function () { callee(target, index + 1); clearTimeout(timer); }, action.time);
                }
                $(target).data('curIndex', index);
            }
        }
    }
    function Animation(actions) {
        if (actions) {
            $(this).data('actions', actions);
        }
        else {
            $(this).data('actions', []);
        }
        $(this).data('curIndex', 0);
        this.addAction = function (action, context, time) {
            $(this).data('actions').push({ action: action, context: context, time: time });
            return this;
        }
        this.removeAction = function (action) {
            var actions = $(this).data('actions');
            $(actions).each(function (i, v) {
                if (v.action == action||v==action) {
                    actions.splice(i, 1);
                    return false;
                }
            });
            return this;
        }
        this.start = function () {
            $(this).data('stop',false);
            active(this, 0);
            return this;
        }
        this.stop = function () {
            $(this).data('stop', true);
            return this;
        }
        this.goon = function () {
            $(this).data('stop', false);
            active(this, $(this).data('curIndex') + 1);
            return this;
        }
    }
    $.Animation = function () {
        return new Animation();
    }
})(jQuery);

Demo:

<html>
<head>
    <title>animation</title>
    <script src="~/Script/jquery-1.11.3.js"></script>
    <script src="~/Script/jAnimation.js"></script></head>
    <script>
   $.Animation().addAction(function (context) { console.log(context); }, 1, 2000).addAction(function (context) {console.log(context);}, 2, 4000).addAction(function (context) {console.log(context);}, 3, 3000).start(); 
   </script>
<body>
</body>
</
html>
原文地址:https://www.cnblogs.com/kingge/p/4925211.html