제이쿼리 문의드립니다. (click 반복문)

제이쿼리 문의드립니다. (click 반복문)

QA

제이쿼리 문의드립니다. (click 반복문)

답변 5

본문


$(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() {
    ~
  });
 
});

<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);

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 67
© SIRSOFT
현재 페이지 제일 처음으로