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