如何使用jquery按顺序添加类到div,如动画

时间:2014-09-13 06:21:11

标签: jquery css css3

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

Animation with 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');

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

有什么想法吗?

1 个答案:

答案 0 :(得分:3)

这段代码会有所帮助,

实际上我正在使用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>