setinterval을 사용한 롤링 애니메이션 동작시 마우스 오버 채택완료
</p>
<p> /** 롤링 애니메이션 **/</p>
<p> var roll = function() {</p>
<p> $('.sec03 .txt3 li').removeClass('active');</p>
<p> $('.sec03 .txt3 li:nth-child('+no+')').addClass('active');</p>
<p> no=no+1;</p>
<p> if(no>4)no=1; </p>
<p> }</p>
<p> </p>
<p>var no=1;</p>
<p> tid0 = setInterval(roll,1500);</p>
<p>
1.5초마다 클래스를 부여해서 롤링효과를 주었는데요
마우스를 오버햇을 때 값을 초기화 시키고 처음부터 동작하려면 어떻게 해야할까요 ?
답변 1개
안녕하세요.
아래의 내용을 참고해 보시겠어요?
var roll = function() { $('.sec03 .txt3 li').removeClass('active'); $('.sec03 .txt3 li:nth-child('+no+')').addClass('active'); no=no+1; if(no>4)no=1; } var no=1; var tid0 = setInterval(roll,1500);
// 마우스 오버 이벤트를 감지해서 애니메이션을 초기화하고 다시 시작합니다. $('.sec03 .txt3 li').hover(function() { clearInterval(tid0); // setInterval을 초기화합니다. $('.sec03 .txt3 li').removeClass('active'); // 모든 active 클래스를 제거합니다. no=1; // no 값을 초기화합니다. $('.sec03 .txt3 li:nth-child('+no+')').addClass('active'); // 첫 번째 요소에 active 클래스를 추가합니다. tid0 = setInterval(roll,1500); // 애니메이션을 다시 시작합니다. });
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인