그누보드 QA - setinterval을 사용한 롤링 애니메이션 동작시 마우스 오버

setinterval을 사용한 롤링 애니메이션 동작시 마우스 오버

굼떠 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2023.12.06 11:07:33 조회 1202 (61.♡.♡.52)

본문


    /** 롤링 애니메이션 **/
    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;
    tid0 = setInterval(roll,1500);

1.5초마다 클래스를 부여해서 롤링효과를 주었는데요

마우스를 오버햇을 때 값을 초기화 시키고 처음부터 동작하려면 어떻게 해야할까요 ?

#javascript

답변 1

제이앤 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2023-12-06 12:11:05 122.♡.♡.120

안녕하세요.

아래의 내용을 참고해 보시겠어요?

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); // 애니메이션을 다시 시작합니다.
});