javascript - 如何将此代码编写为链接单击动画

Question

如何将此代码编写为链接单击动画。当我加载我的页面时，这个动画就起作用了。

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

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

我需要写这个动画，当我点击一个链接时。我写了这段代码来动画一个 CSS 动画。

Answer 1

你可以这样做..

jQuery("a#linkOne").click(function () {
    var index = 0;
    var boxes = $('.box1, .box2, .box3, .box4, .box5, .box6');

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

HTML

<a href="javascript:;" id="linkOne" > CLick Me</a>

Answer 2

boxes.each(
    function(event){
        this.style. //do whatever you want with your style via traditional DOM here
                    //It'll influence all the elements saved in boxes
    }
);

Answer 3

<a id="btn" href="#">Click Me</a>

$('#btn').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 4

我会做这样的事情：

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

  boxes.on('click', function() {       
    boxes.removeClass('animated');
    $(this).addClass('animated');
  });
})();

需要测试，但应该可以工作！