Animationhtml
(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:jquery
<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>