由 add/removeClasses 组成的循环“动画”

Posted 2023-05-07

【中文标题】由 add/removeClasses 组成的循环“动画”

【英文标题】：Loop "animation" consisting of add/removeClasses

【发布时间】：2013-11-28 02:52:45

【问题描述】：

我正在尝试循环添加和删除类的“动画”：

function loading() 
  $('#loading').removeClass().addClass('load0').delay(5000).removeClass().addClass('load1').delay(5000).removeClass().addClass('load2').delay(5000).removeClass().addClass('load3').delay(5000, loading);

loading();

两个问题：

似乎removeClass() 和addClass() 不能与delay() 一起排队。 delay() 似乎不接受回调函数。

我该怎么做？

【问题讨论】：

延迟用于fx队列，load1..n类有什么？

它们是：.load0display:none !important;、.load1margin-left:-48px !important;、.load2 和 .load3margin-left:24px !important;。

【参考方案1】：

var l = $('#loading'),
    i = 0;

(function loading() 
    l.removeClass().addClass('load' + i);
    i = ++i % 4;
    setTimeout(loading, 5000);
)();

---

或者我们也可以封装变量。

(function loading(l, i) 
    l.removeClass().addClass('load' + i);
    setTimeout(function() 
       loading(l, ++i % 4);
    , 5000);
)($('#loading'), 0);

---

现代浏览器让这变得更干净了。

(function loading(l, i) 
    l.removeClass().addClass('load' + i);
    setTimeout(loading, 5000, l, ++i % 4);
)($('#loading'), 0);

【讨论】：

你摇滚！效果很好！如果我想要这个怎么办：load0 --> 500ms --> load1 --> 500ms --> load2 --> 500ms load3 -->1000ms --> load0?

您将测试i 的值，并相应地设置所需的持续时间。

【参考方案2】：

您不能将delay 用于非动画函数

将setTimeout 与您自己的回调一起使用可能会更好。

【讨论】：

我的理解是，如果removeClass不带参数调用，会删除所有类。

多个消息来源证实它确实在这里，但：***.com/questions/1424981/…

@qwertynl：是的，那里确实这么说。

嗯，好的。从来不知道。

【参考方案3】：

如果我们尝试循环动画，为什么不使用带有回调的 .animate() 循环动画？

小提琴示例： http://jsfiddle.net/Culyx/fsxpZ/1/

小提琴中的“箭头”现在只是一个占位符 div 的图像；但这应该是在 jquery 中循环动画的另一种方式。循环动画代码：

$(document).ready(function () 

    //looping bouncing arrow animation and speed controls
    var arrowSpeed = 400;
    bounceLeft = function () 
        $(".arrow").animate(
            left: "+=50px"
        , 
            duration: arrowSpeed,
            complete: bounceRight
        );
    
    bounceRight = function () 
        $(".arrow").animate(
            left: "-=50px"
        , 
            duration: arrowSpeed,
            complete: bounceLeft
        );
    
    bounceLeft();
);