제이쿼리 애니메이션 질문 입니다~ 채택완료
웹프리죤
7년 전
조회 2,016
.on 을 클릭시 애니메이션이 실행이 되는데요
실행이 되는 도중에 다시 .on을 클릭하면 모든게 초기화 되면서 다시 시작되었으면 좋겠는데
지금은 클릭할 대 마다 진행되는게 막 겹쳐 버리네요..
방법을 모르겠네요.
도움을 구합니다~
</p>
<p>$(function(){
$('.on').on('click', function() {</p>
<p>
function ani() {</p>
<p> $('.txt1').fadeIn();
$('.txt1').delay(1600).fadeOut('slow', function(){
$('.txt2').fadeIn();
$('.txt2').delay(1600).fadeOut('slow', function(){</p>
<p> $('.txt3').fadeIn();
$('.txt3').delay(1600).fadeOut('slow', function(){</p>
<p> ani();</p>
<p> });</p>
<p> });
});
}
ani();</p>
<p>});</p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
댓글을 작성하려면 로그인이 필요합니다.
7년 전
</p>
<p><style>
.on, .txt1, .txt2, .txt3 {
height: 100px;
border: 1px solid #f00;
line-height: 50px;
}
.txt1, .txt2, .txt3 {
display: none;
}
</style></p>
<p><script>
$(function(){
$('.on').one('click', function() {
function ani() {
$('.txt1').fadeIn();
$('.txt1').delay(1600).fadeOut('slow', function(){
$('.txt2').fadeIn();
$('.txt2').delay(1600).fadeOut('slow', function(){
$('.txt3').fadeIn();
$('.txt3').delay(1600).fadeOut('slow', function(){
ani();
});
});</p>
<p> });
}
ani();
});
});
</script></p>
<p><div class="on">on</div>
<div class="txt1">txt1</div>
<div class="txt2">txt2</div>
<div class="txt3">txt3</div></p>
<p>이런걸 원하신거 아닌가요?
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
웹프리죤
7년 전
on 을 클릭할 대마다 애니메이션이 초기화 되고 다시 시작 되게 할려구 합니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인