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

how to write this code as link click animation

本文关键字：链接 单击 动画 代码      更新时间：2023-09-26

如何将此代码编写为链接单击动画。这个动画在我加载页面时工作。

 (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动画。

您可以这样做。。

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>

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

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

我会这样做：

(function () {
  var index = 0;
  var boxes = $('.box1, .box2, .box3, .box4, .box5, .box6');
  boxes.on('click', function() {       
    boxes.removeClass('animated');
    $(this).addClass('animated');
  });
})();

需要测试，但应该有效！

相关文章：