CSS 클래스/호버 상태 사이를 반복하려고 시도 중 -

Question

내 abortTimer 함수가 실행될 때까지 무기한으로 호버링 상태와 호버 상태 사이에 몇 개의 링크를 움직이게하는 JQuery에서 함수를 만들려고합니다. 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

당신은 단순히 togglehover 클래스 당신의 간격 타이머들이 한 데, 다른 하나는 호버 클래스를 가지고 있지으로 시작 가정 만료 될 때마다.

요소가 호버되었을 때 자동 토글을 중지하도록 편집 된.

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