제이쿼리 문의드립니다. (click 반복문) 채택완료
</p>
<p>$(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);</p>
<p> $( 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);
}
}); </p>
<p> });
});//ready end</p>
<p>
안녕하세요, 고수님들 제이쿼리 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이라고 나오겠죠
즉 클릭 이벤트는 발생하지만 애니메이션 등이 실행 하나마나한 상태라는 거죠
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
<div id="tab02" class=""> </div>
</p>
<p>$(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</p>
<p>
위와 같이 하면 한번만 클릭 할 수 있도록 잠김이 가능 합니다.
$("#tab02").attr("disabled",true);
댓글을 작성하려면 로그인이 필요합니다.
f12 누르셔서 콘솔탭에 어떤 오류가 나오는지 채크해보세요.
1차 펑션 이후 후행 펑션의 오류에 의해서 스크립트가 죽어있을수도 있습니다.
댓글을 작성하려면 로그인이 필요합니다.
click() 메소드는 최초 1회만 작동되는 성격이 아닙니다.
매 클릭시 작동하는 메소드입니다.
$('#tab02').on('click', function() {
alert('abc');
});
매 클릭시마다 작동되는 것이 정상입니다.
최초 1회만 작동하고 두번째부터 작동하지 않는다면,
click() 메소드안의 어떤 코드가 2번째 이후 클릭시의 작동을 방해하는 것일 가능성이 있습니다.
어떤 코드가 문제가 있는지를 파악해보는 것이 좋을 듯 합니다.
click() 메소드안에 scroll() 메소드가 있는데.. 문제가 될 가능성이 큽니다.
scroll() 메소드를 click() 메소드 밖으로 빼는 게 좋을 듯 합니다.
</p>
<p>$(document).ready(function(){</p>
<p> </p>
<p> $('#tab02').on('click', function() {</p>
<p> ~</p>
<p> });</p>
<p> </p>
<p> $(window).on('scroll', function() {</p>
<p> ~</p>
<p> });</p>
<p> </p>
<p>});</p>
<p>댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인