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);
    });
}());

DEMO： http://jsfiddle.net/NcdZT/1/

我确信有些事情可以缩小并提高效率（比如if语句），但这似乎是可读的，可以达到你想要的效果。

跟踪setTimeout可以中断进程。如果你将超时从80增加到更明显（或者你点击足够快），你会发现“动画”可以在中途反转。

JavaScript点击另一个链接后如何反转此动画

1 个答案: