jquery addClass和removeClass with setInterval

我想每隔3秒更改一次class级名称。 不行不通。 我怎样才能做到这一点？ 

$(document).ready(function() { function moveClass(){ var x = $('.liveEvents'); x.removeClass('liveEvents'); x.addClass('liveEventsActive'); x.removeClass('liveEventsActive'); x.addClass('liveEvents'); } setInterval(moveClass, 3000); return false; });

您可以在一行中执行此操作。 使用toggleClass ： 

 setInterval(function(){$('.liveEvents').toggleClass('liveEventsActive')}, 3000);

如果正确执行CSS，则无需删除liveEvents类。 只需让liveEventsActive类覆盖您需要的内容即可。

每次函数运行时你都会做四件事，这实际上会让你回到你的开始状态：

  • 删除类liveEvents
  • 添加class liveEventsActive
  • 删除class liveEventsActive
  • 添加类liveEvents

您想要打开/关闭这两个类，所以看看.toggleClass()函数。 您还需要两个选择器，一个用于选择具有liveEvents类的元素，另一个用于选择具有liveEvents类的元素。

使用您的代码，整个function每3秒执行一次。 添加/删除类在一个块中发生，您显然无法看到差异。

jQuery有一个.toggleClass（）方法，它将相应地添加/删除指定的类： 

 function moveClass() { $('.liveEvents') .toggleClass('liveEventsActive'); }

DEMO 

 $(document).ready(function() { function moveClass(){ $( ".liveEvents" ).switchClass( "liveEvents", "liveEventsActive", 1000); $( ".liveEventsActive" ).switchClass( "liveEventsActive", "liveEvents", 1000 ); } setInterval(moveClass, 3000); return false; });

这将使用转换交换您的类，希望这将有所帮助

Interesting Posts