제이쿼리 애니메이션 질문 입니다~
본문
.on 을 클릭시 애니메이션이 실행이 되는데요
실행이 되는 도중에 다시 .on을 클릭하면 모든게 초기화 되면서 다시 시작되었으면 좋겠는데
지금은 클릭할 대 마다 진행되는게 막 겹쳐 버리네요..
방법을 모르겠네요.
도움을 구합니다~
$(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
$('.on').one('click', function() { 로 변경해 보세요
안되네요~^^ ;;
<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>
이런걸 원하신거 아닌가요?
on 을 클릭할 대마다 애니메이션이 초기화 되고 다시 시작 되게 할려구 합니다
답변을 작성하시기 전에 로그인 해주세요.