.on 을 클릭시 애니메이션이 실행이 되는데요
실행이 되는 도중에 다시 .on을 클릭하면 모든게 초기화 되면서 다시 시작되었으면 좋겠는데
지금은 클릭할 대 마다 진행되는게 막 겹쳐 버리네요..
방법을 모르겠네요.
도움을 구합니다~
Copy
$(function(){
$('.on').on('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();
});
});
});
}
ani();
});답변 3개 / 댓글 1개
채택된 답변
+20 포인트
logos
2018-02-23 (금) 15:19:04
$('.on').one('click', function() { 로 변경해 보세요
logos
2018-02-23 (금) 16:18:34
Copy
<style>
.on, .txt1, .txt2, .txt3 {
height: 100px;
border: 1px solid #f00;
line-height: 50px;
}
.txt1, .txt2, .txt3 {
display: none;
}
</style>
<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();
});
});
});
}
ani();
});
});
</script>
<div class="on">on</div>
<div class="txt1">txt1</div>
<div class="txt2">txt2</div>
<div class="txt3">txt3</div>이런걸 원하신거 아닌가요?
답변에 대한 댓글 1개
2018-02-23 (금) 15:22:31
안되네요~^^ ;;
답변을 작성하려면 로그인이 필요합니다.