我尝试使用模拟此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');
现在我唯一的问题是回到开头
有什么想法吗?
答案 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>