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

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

QA

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

본문


    /** 롤링 애니메이션 **/
    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초마다 클래스를 부여해서 롤링효과를 주었는데요

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

 

이 질문에 댓글 쓰기 :

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

답변을 작성하시기 전에 로그인 해주세요.
전체 2,660
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT