試圖在CSS類/懸停狀態之間循環 - jquery

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

您只需每個間隔計時器到期時，假設他們開始與一個有和其他不具有懸停上課時間的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; 
    }); 
});