제이쿼리 문의드립니다. (click 반복문)
본문
$(document).ready(function(){
$("#tab02").click(function(){
$("#tab01,#tab03,#tab04").removeClass("on");
$(this).addClass("on");
$(".tabContent .b_box01").delay(300).animate({"margin-top":0, "opacity":1},600);
$(".tabContent .b_box01 .cont_img_wrap").animate({"opacity":1},700);
$(".tabContent .b_box01 .cont_txt_wrap").delay( 500 ).animate({"opacity":1},1000);
$( window ).scroll( function() {
var thisScroll = $(this).scrollTop();
var $box21 = $(".tabContent .b_box02").offset().top - 650;
if ( thisScroll > $box21 ) {
$(".tabContent .b_box02").delay(300).animate({"margin-top":0, "opacity":1},1000);
$(".tabContent .b_box02 .cont_img_wrap").animate({"opacity":1},700);
$(".tabContent .b_box02 .cont_txt_wrap").delay( 500 ).animate({"opacity":1},1000);
}
});
});
});//ready end
안녕하세요, 고수님들 제이쿼리 click 반복문 문의드립니다.
샘플사이트를 구축하고 있는데 최초 클릭시에만 작동되는 제이쿼리 코드는 어찌저찌 만들었으나
click시마다 무한반복되게끔 작동되는 제이쿼리에서 계속 막히네요...
#tab02 클릭 시
$(".tabContent .b_box01").delay(300).animate({"margin-top":0, "opacity":1},600);
$(".tabContent .b_box01 .cont_img_wrap").animate({"opacity":1},700);
$(".tabContent .b_box01 .cont_txt_wrap").delay( 500 ).animate({"opacity":1},1000);
$( window ).scroll( function() {
var thisScroll = $(this).scrollTop();
var $box21 = $(".tabContent .b_box02").offset().top - 650;
if ( thisScroll > $box21 ) {
$(".tabContent .b_box02").delay(300).animate({"margin-top":0, "opacity":1},1000);
$(".tabContent .b_box02 .cont_img_wrap").animate({"opacity":1},700);
$(".tabContent .b_box02 .cont_txt_wrap").delay( 500 ).animate({"opacity":1},1000);
}
위에 부분이 반복되게 작동시킬 방법이 없을까요?
구글링 하면서 참고자료들로 이것저것 시도해봤는데 계속 오류가 나고
.click()->을 .toggle() 수정해서 사용하면 #tab02 가 블라인드 처리가 됩니다. ㅠㅠ
도움부탁드리겠습니다..
답변 5
무한반복이라는 것이 말이 안되는 상황 같은데요?
처음 클릭하여 $("#tab01,#tab03,#tab04").removeClass("on"); <--이렇게 되었는데
다시 클릭하면 다시 $("#tab01,#tab03,#tab04").removeClass("on"); <--- 이렇게 되기를 원한다는 것이
말이 안되는 상황아닌가요?
이하 부분들도 마찬가지죠
$(".tabContent .b_box01").delay(300).animate({"margin-top":0, "opacity":1},600); <-- 처음 클릭시
margin-top:0 , opacity:1 이 된 상태인데 다시 클릭하면 변할 것이 없죠
$("#tab02").click(function(){ alert('click'); 이렇게 해보세요/ 클릭 할때마다 click이라고 나오겠죠
즉 클릭 이벤트는 발생하지만 애니메이션 등이 실행 하나마나한 상태라는 거죠
click() 메소드는 최초 1회만 작동되는 성격이 아닙니다.
매 클릭시 작동하는 메소드입니다.
$('#tab02').on('click', function() {
alert('abc');
});
매 클릭시마다 작동되는 것이 정상입니다.
최초 1회만 작동하고 두번째부터 작동하지 않는다면,
click() 메소드안의 어떤 코드가 2번째 이후 클릭시의 작동을 방해하는 것일 가능성이 있습니다.
어떤 코드가 문제가 있는지를 파악해보는 것이 좋을 듯 합니다.
click() 메소드안에 scroll() 메소드가 있는데.. 문제가 될 가능성이 큽니다.
scroll() 메소드를 click() 메소드 밖으로 빼는 게 좋을 듯 합니다.
$(document).ready(function(){
$('#tab02').on('click', function() {
~
});
$(window).on('scroll', function() {
~
});
});
f12 누르셔서 콘솔탭에 어떤 오류가 나오는지 채크해보세요.
1차 펑션 이후 후행 펑션의 오류에 의해서 스크립트가 죽어있을수도 있습니다.
<div id="tab02" class=""> </div>
$(document).ready(function(){
$("#tab02").click(function(){
$("#tab01,#tab03,#tab04").removeClass("on");
$(this).addClass("on");
$(".tabContent .b_box01").delay(300).animate({"margin-top":0, "opacity":1},600);
$(".tabContent .b_box01 .cont_img_wrap").animate({"opacity":1},700);
$(".tabContent .b_box01 .cont_txt_wrap").delay( 500 ).animate({"opacity":1},1000);
$( window ).scroll( function() {
var thisScroll = $(this).scrollTop();
var $box21 = $(".tabContent .b_box02").offset().top - 650;
if ( thisScroll > $box21 ) {
$(".tabContent .b_box02").delay(300).animate({"margin-top":0, "opacity":1},1000);
$(".tabContent .b_box02 .cont_img_wrap").animate({"opacity":1},700);
$(".tabContent .b_box02 .cont_txt_wrap").delay( 500 ).animate({"opacity":1},1000);
}
});
$("#tab02").attr("disabled",true); // 이부분 추가해 주면 한번만 실행 됩니다.
});
});//ready end
위와 같이 하면 한번만 클릭 할 수 있도록 잠김이 가능 합니다.
$("#tab02").attr("disabled",true);
