试图在CSS类/hover状态之间循环 – Jquery

我正在尝试在JQuery中创建一个函数，它可以无限期地abortTimer它们的非hover和hover状态之间的几个链接，直到我的abortTimer函数被触发。 我想在相反的时间在a.mus-plr和a.earbuds之间制作动画，所以当其中一个元素启用了'.hover'类时，另一个不启用'.hover'类。 我希望每个元素每3000毫秒在它的hover状态之间切换。

任何帮助将非常感激！ 我似乎无法让这个工作。 我认为这可能是我如何定义我的setInterval计时器的问题。 谢谢！！

JQuery文件：

 $(document).ready(function(){ var tid = setInterval(animateControls, 4000); function animateControls() { $("a.mus-plr").delay(2000).addClass('hover').delay(2000).removeClass('hover'); $("a.earbuds").addClass('hover').delay(2000).removeClass('hover'); } function abortTimer() { clearInterval(tid); } }); 

Answer 1

您只需在每次间隔计时器到期时切换 hover类，假设它们从一个拥有而另一个没有hover类开始。

编辑在元素hover时停止自动切换。

 $(function() { var doToggle = true; $('a.mus-plr').removeClass('hover'); $('a.earbuds').addClass('hover'); var tid = setInterval( function() { if (doToggle) $('a.mus-plr, a.earbuds').toggleClass('hover'); }, 2000); setTimeout(function() { if (tid) clearInterval(tid); $('a.mus-plr,a.earbuds').removeClass('hover'); }, 30000); // stop toggling after 30 seconds $('a.mus-plr,a.earbuds').hover( function() { doToggle = false; }, function() { doToggle = true; }); });