jquery - 如何使用jquery像动画一样按顺序向div添加类

Question

我正在尝试使用模拟此 GIF 的 jQuery 制作动画(我尝试过 css3 动画关键帧，但它不整齐且不好，除非有更简单的 css3 方法)

我尝试添加的每个 CSS 类都有背景颜色和背景位置

<div class="displayer ico1"></div>

CSS 类数组为 ico1 ico2 ico3 --- ico6。我需要在每次更改之间延迟 3 秒暂停，当然它们必须循环回 ico1 2 3 等

我知道 .queue() 函数，但我不知道如何正确使用它来模拟它。

任何帮助将不胜感激

谢谢

编辑----

我找到了这个 jQuery 插件 https://github.com/madbook/jquery.wait

这个技巧做得非常巧妙!

$('.displayer').addClass('ico1').wait(5000).removeClass('ico1').addClass('ico2').wait(5000).removeClass('ico2').addClass('ico3').wait(5000).removeClass('ico3').addClass('ico4').wait(5000).removeClass('ico4').addClass('ico5').wait(5000).removeClass('ico5').addClass('ico6').wait(5000).removeClass('ico6');

现在我唯一的问题是循环回到开头

有什么想法吗？

Answer 1

这段代码会有帮助，

实际上我正在使用setInterval函数，3秒后触发该函数，所有类都放在一个数组中

3 秒后，删除一个类并添加其他类，并继续循环

    <script type='text/javascript'>

        $(document).ready(function(){   

           imageArray = new Array('icon1' , 'icon2', 'icon3', 'icon4', 'icon5', 'icon6'); //add more classes in this array
           i=0;  // first class to be used 
           setInterval(function(){
             i = (i >= imageArray.length)?0:i;
             $('.displayer').removeClass(imageArray.join(' ')).addClass(imageArray[i++]); 
           },1000); // this is the time in millisecond             
         });  
    </script>

<div class="displayer"></div>