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

最愚蠢的问题4，我想，我试图让我的最后一个李，它有一个图像的背景（一个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>

香港专业教育学院创建2级额外的类名为开启和关闭的CSS，我虽然我可以在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复制这种效应的最好或easyiest方式...

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

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

在此先感谢马蒂。

来源

2010-09-17 Marty

为什么不只是创建一个动画GIF图像，并把它作为背景？会不会让你很多的代码:) – easwee 2010-09-17 10:04:05

你为什么不回去接受一些awnsers。然后，我可以帮助你:) – meo 2010-09-17 10:06:32

嗨，大家好，感谢所有的反应，我只在大约15分钟前发布了问题，做了一个杯子，然后回来检查，没有意识到会有这么多答案，我确实试着做虽然背景仍然是背景，但即使透明度已设置为没有效果，我仍然在10分钟内给出了一些这样的尝试和不适的报告，再次感谢他们;） – Marty 2010-09-17 10:20:54

使用toggleClass()方法，它允许多个类进行切换

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

您将需要上的第一组里的两个类之一.. （或者你可以使用jQuery，你必须在你的代码$('#header ul li#checkit').addClass('on');它添加评论）

来源

2010-09-17 10:13:21

这几乎可行，但它最初并没有一个类，所以需要应用，否则他会得到'.on'样式，因为它在CSS中最后定义。 – 2010-09-17 10:14:42

@Nick，好吧..我确实提到过他会先在元素上设置两个类中的一个..我会在那里添加一行以通过jquery完成它。 – 2010-09-17 10:20:14

你做到了，我的评论后:) +1为更新的答案 – 2010-09-17 10:22:19

使用切换功能 - 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'); 
});

来源

2010-09-17 10:07:03 easwee

这样做了看起来几乎是我要找的东西，尽管dosnt在试用时似乎有任何动画，你认为在切换开始之前需要触发某种类型的触发器吗？ – Marty 2010-09-17 10:28:47

使用setInterval：

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

你不会需要一个 'off' 级，你可以只风格的 'on' 不同。

我确实注意到您正在尝试更改li的类，但将其设置为CSS中的锚点。添加或删除一个，这取决于元素你想

来源

2010-09-17 10:09:31 Alex

由于Gaby

$(document).ready(function() { 

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

});

来源

2010-09-17 10:32:51 Marty

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

回答

相关问题