jquery - 如何使图像看起来像闪烁的动画

Question

最愚蠢的问题 4，我想，我正在尝试让我的最后一个 li，它有一个背景图像 (a href) 看起来好像它是一个闪烁的图像，从一种颜色变为另一种颜色，它的实际上只是将背景图像从一个位置移动到另一个位置，这已经在使用 css 进行悬停，但我喜欢使用 jquery 为该按钮设置动画以模拟闪烁效果...

我的 HTML 代码如下..

<ul>
   <li id="view"><a href="#">One</a></li>
   <li id="contact"><a href="#">Two</a></li>
   <li id="checkit"><a href="#">Three</a></li>
</ul>

我在 css 中创建了 2 个额外的类，称为 on 和 off，虽然我可以在 jquery 中使用它们来为 a href 设置动画，

#header ul li#checkit a.off{background-position: -352px 0;}
#header ul li#checkit a.on{background-position: -352px -73px;}

最好或最简单的方法是每 0.5 秒更改一次背景或将 css 从打开更改为关闭以复制该效果...

$(document).ready(function() {
       //$('#header ul li#checkit').addClass('on');
       //$('#header ul li#checkit').addClass('off');

       $('#header ul li#checkit').animate({ ? }, 150);
});

在此先感谢马蒂。

Answer 1

使用 toggleClass()允许切换多个类的方法

setInterval(
    function(){
         $('#header ul li#checkit').toggleClass('on off');
    },500
   );

您需要先在 li.. 上设置两个类中的一个。(或者您可以使用 jquery 添加它，就像您在代码中的注释中一样 $('#header ul li#checkit ').addClass('on');)