Question

愚蠢的问题4，我想，我正试图让我的最后一个li，它有一个背景图像（一个href）看起来好像是一个闪烁的图像，从一种颜色变为另一种颜色，实际上只是将背景图像从一个位置移动到下一个位置，这已经在使用css进行悬停，但id喜欢使用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);
});

提前感谢Marty。

Answer 1

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

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

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

Answer 2

使用setInterval：

setInterval(function()
{
    // Get the elements and toggle classes
    $('#header ul li#checkit a').toggleClass('on');
}, 500);

您不需要“off”课程，您可以采用不同的格式设置“on”。

我确实注意到您正在尝试更改li的类，但是将其设置在CSS中的锚点上。根据您想要的元素添加或删除a

Answer 3

使用切换功能 - http://api.jquery.com/toggle/

$('#target').toggle(function() {
  $('#header ul li#checkit').addClass('on').removeClass('off');
}, function() {
  $('#header ul li#checkit').removeClass('on').addClass('off');
});

Answer 4

感谢Gaby

$(document).ready(function() {

   setInterval(
    function(){
        $('#checkit a').toggleClass('on');
    },500
   );

});

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

4 个答案: