Question

我正在尝试在JQuery中创建一个函数，它可以无限期激活其非悬停状态和悬停状态之间的几个链接，直到我的abortTimer函数被触发。我希望在相反的时间在a.mus-plr和a.earbuds之间进行动画处理，因此当其中一个元素启用了'.hover'类时，另一个元素将启用'.hover'类。我希望每个元素每3000毫秒在它的悬停状态之间切换。

任何帮助将不胜感激！我似乎无法让这个工作。我认为这可能是我如何定义我的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

每次间隔计时器到期时，你只需要toggle 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;
     });
});

试图在CSS类/悬停状态之间循环 - Jquery

1 个答案: