javascript - JavaScript如何反转这个动画，点击另一个链接后

Question

    $('#home').click(doWork);

function doWork() {
        var index = 0;
        var boxes = $('.box1, .box2, .box3, .box4, .box5, .box6');

        function start() {
            boxes.eq(index).addClass('animated');
            ++index;
            setTimeout(start, 80);
        };
        start();
    }

当我点击一个链接时，这个动画就开始了。结束动画后，我需要反转这个动画，点击另一个链接。

Answer 1

下面的代码允许您启动该过程，并中断它以执行相反的操作：

(function () {
    "use strict";

    var doWork,
        index,
        boxes,
        numBoxes,
        workerTO;

    index = 0;
    boxes = $(".box1, .box2, .box3, .box4, .box5, .box6");
    numBoxes = boxes.length;
    doWork = function (changer, reverse) {
        var direction, worker;

        clearTimeout(workerTO);

        direction = reverse ? -1 : 1;
        worker = function () {
            if (reverse) {
                if (index < 0) {
                    index = 0;
                    return;
                }
            } else {
                if (index >= numBoxes) {
                    index = numBoxes - 1;
                    return;
                }
            }
            console.log(index);
            changer(boxes.eq(index));
            index += direction;
            workerTO = setTimeout(worker, 80);
        };
        worker();
    };

    $("#home").click(function () {
        doWork(function (el) {
            el.addClass("animated");
        });
    });

    $("#home2").click(function () {
        doWork(function (el) {
            el.removeClass("animated");
        }, true);
    });
}());

演示：http: //jsfiddle.net/NcdZT/1/

我确信有些东西可以被浓缩并变得更有效率（比如if语句），但这似乎是可读的并且可以实现你想要的。

跟踪setTimeout允许进程被中断。如果您将超时时间从 80 增加到更明显的值（或者如果您单击得足够快），您会看到“动画”可以在中途反转。