0

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

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

查询文件：

$(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);
    }
});
4

1 回答 1

1

每次间隔计时器到期时，您只需切换类，假设它们从一个具有悬停类而另一个没有悬停类开始。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;
     });
});
于 2012-06-09T20:16:12.897 回答