JQuery Добавление класса, когда элемент находится в поле зрения

Question

имеет этот код, который проверяет, является ли класс в поле зрения, и если он добавляет класс, но по какой-то причине он работает. Я пытаюсь добавить класс box-active, только если divs in view.

Я был на это какое-то время, можете ли вы, ребята, сказать мне, что не так с кодом? и возможное исправление или как я могу это исправить.

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? Вы можете легко добавить класс к любому элементу после завершения одной из ваших анимаций.

ссылка:

Пример:

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>