Jquery 요소가 뷰에있을 때 클래스 추가 중

Question

클래스가 뷰에 있는지 확인하고 클래스를 추가하는 경우 해당 클래스가 작동하는지 확인하는 코드가 있습니다. 보기에 div가있는 경우에만 클래스 상자 활성을 추가하려고합니다.

지금 당분간 지 냈습니다. 코드에 무엇이 잘못되었는지 말해 줄 수 있습니까? 가능한 수정 또는 어떻게 수정해야하는지 알려줍니다.

codepen : http://codepen.io/salman15/pen/rLRZrJ

jQuery를

$(document).ready(function() { 

    $('#next').click(function() { 
    if ($('.in1,.in2,.in3').next('.t1,.t2,.t3').length) { 

     $('.t1').animate({ 
     left: '-1000px' 
     }) 
     $('.in1').removeClass('in1') 
     .next('.t1') 
     .addClass('in1'); 


     $('.t2').animate({ 
     right: '-1000px' 
     }) 
     $('.in2').removeClass('in2') 
     .next('.t2') 
     .addClass('in2'); 

     $('.t3').animate({ 
     bottom: '-1000px' 
     }) 
     $('.in3').removeClass('in3') 
     .next('.t3') 
     .addClass('in3'); 

    } 
    }); 

    $('#prev').click(function() { 
    if ($('.in1,.in2,.in3').prev('.t1,.t2,.t3').length) { 

     $('.t1').animate({ 
     left: '-1000px' 
     }) 
     $('.in1').removeClass('in1') 
     .prev('.t1') 
     .addClass('in1'); 


     $('.t2').animate({ 
     right: '-1000px' 
     }) 
     $('.in2').removeClass('in2') 
     .prev('.t2') 
     .addClass('in2'); 

     $('.t3').animate({ 
     bottom: '-1000px' 
     }) 
     $('.in3').removeClass('in3') 
     .prev('.t3') 
     .addClass('in3'); 

    } 
    }); 

}); 

$.fn.isVisible = function() { 
    // Am I visible? 
    // Height and Width are not explicitly necessary in visibility detection, the bottom, right, top and left are the 
    // essential checks. If an image is 0x0, it is technically not visible, so it should not be marked as such. 
    // That is why either width or height have to be > 0. 
    var rect = this[0].getBoundingClientRect(); 
    return (
     (rect.height > 0 || rect.width > 0) && 
     rect.bottom >= 0 && 
     rect.right >= 0 && 
     rect.top <= (window.innerHeight || document.documentElement.clientHeight) && 
     rect.left <= (window.innerWidth || document.documentElement.clientWidth) 
    ); 
}; 
if ($('.box').isVisible()) { 
      setTimeout(function(){ 
      $('.box').removeClass('box-active')}, 4000); 
} else{ 
       setTimeout(function(){ 
      $('.box').addClass('box-active')}, 4000); 
}; 

Answer 1

왜 .animate에서 마무리 이벤트를 사용하지 않는? 애니메이션이 완료된 후 모든 요소에 클래스를 쉽게 추가 할 수 있습니다.

참조 : http://api.jquery.com/animate/ 예

:

var clicked = 1; 
 
$("button").click(function(){ 
 
    /* just for the demo */ 
 
if(clicked==4){ 
 
    clicked = 2; 
 
    $(".inner").css("margin-left","0px"); 
 
    } 
 
else clicked++; 
 
    /* - */ 
 
    
 
    if($(".box-active").length == 1) $(".box-active").removeClass("box-active"); 
 
    
 
    $(".inner").animate({marginLeft :"-=250px"},"slow",function(){ 
 
    //WHEN ANIMATION IS COMPLETE 
 
    // Add the box-active class 
 
    $("div.a"+clicked+"").addClass("box-active"); 
 
    }); 
 

 
});

.outer{ 
 
    width:250px; 
 
    height:100px; 
 
    overflow:hidden; 
 
} 
 
.inner{ 
 
    width:1000px; 
 
    height:100px; 
 
    margin-left:0px; 
 
} 
 
.inner > div{ 
 
    width:250px; 
 
    height:100px; 
 
    float:left; 
 
} 
 

 
.a1{ 
 
    background:blue; 
 
} 
 
.a2{ 
 
    background:red; 
 
} 
 

 
.a3{ 
 
    background:green; 
 
} 
 
.a4{ 
 
    background:grey; 
 
} 
 

 
.box-active{ 
 
    background:cyan !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button>Next</button> 
 
<div class="outer"> 
 
    <div class="inner"> 
 
    <div class="a1 box-active"></div> 
 
    <div class="a2"></div> 
 
    <div class="a3"></div> 
 
    <div class="a4"></div> 
 
    </div> 
 
</div>