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); // 애니메이션을 다시 시작합니다.
});
감사합니다. 저의 경우 마우스가 떠났을때 1번째부터 시작하길 원해서 mouseleave로 처리해줬더니 아주 잘 작동되네요!