Jquery要素が表示されているときにクラスを追加

Question

クラスが表示されているかどうかを確認し、それがクラスを追加するかどうかを確認するコードを持っていますが、私はクラスのボックスアクティブを追加しようとしているのは、ビュー内のdivである場合のみです。

私は1時間以上それをしてきました。あなたはコードに何が間違っているか教えてもらえますか？

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

のjQuery

$(document).ready(function(){ 

    $('#next').click(function(){ 
    if ($('.in1').next('.t1').length) { 

     $('.t1').animate({left:'-1000px'}) 
     $('.in1').removeClass('in1') 
        .next('.t1') 
        .addClass('in1'); 
    } 
     }); 
     $('#next').click(function(){ 
    if ($('.in2').next('.t2').length) { 
      $('.t2').animate({right:'-1000px'}) 
     $('.in2').removeClass('in2') 
        .next('.t2') 
        .addClass('in2'); 
     } 
      }); 
      $('#next').click(function(){ 
    if ($('.in3').next('.t3').length) { 
     $('.t3').animate({bottom:'-1000px'}) 
     $('.in3').removeClass('in3') 
        .next('.t3') 
        .addClass('in3'); 
     } 
    }); 

    $('#prev').click(function(){ 
    if ($('.in1').prev('.t1').length) { 

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

    } 
    }); 
    $('#prev').click(function(){ 
    if ($('.in2').prev('.t2').length) { 
     $('.t2').animate({right:'-1000px'})   
     $('.in2').removeClass('in2') 
        .prev('.t2') 
        .addClass('in2'); 
    } 
    }); 
    $('#prev').click(function(){ 
    if ($('.in3').prev('.t3').length) { 
     $('.t3').animate({bottom:'-1000px'})   
     $('.in3').removeClass('in3') 
        .prev('.t3') 
        .addClass('in3'); 

    } 
    }); 

    var $animation_elements = $('.box'); 
var $window = $(window); 

function check_if_in_view() { 
    var window_height = $window.height(); 
    var window_top_position = $window.scrollTop(); 
    var window_bottom_position = (window_top_position + window_height); 

    $.each($animation_elements, function() { 
    var $element = $(this); 
    var element_height = $element.outerHeight(); 
    var element_top_position = $element.offset().top; 
    var element_bottom_position = (element_top_position + element_height); 

    //check to see if this current container is within viewport 
    if ((element_bottom_position >= window_top_position) && 
     (element_top_position <= window_bottom_position)) { 
     $element.addClass('box-active'); 
    } else { 
     $element.removeClass('box-active'); 
    } 
    }); 
} 

$window.on('scroll resize', check_if_in_view); 
$window.trigger('scroll'); 

}); 

CSS

html,body,section{ 
    margin: 0px; 
    padding: 0px; 
    width: 100%; 
    height: 100%; 
    overflow:hidden; 
} 

#next,#prev{ 
    position:fixed; 
    z-index:101; 
} 

#next{ 
    top:0px; 
    right:0px; 
} 

#prev{ 
    left:0px; 
} 



.t1{ 
    float:left; 
    height:100%; 
    width:43%; 
    background-color: #c92639; 
     position: absolute; 
    left: -1000px; 
} 

.t2{ 
    background-color: white; 
     position: absolute; 
    right: 0px; 
    top: -1000px; 
} 


.t3{ 
    position: absolute; 
    right: 0px; 
    bottom: -1000px; 
    background-color: #c8c8c8; 

} 

.out{ 
    -webkit-animation:forwards; 
    -webkit-animation-name: out3; /* Chrome, Safari, Opera */ 
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ 
    animation:forwards; 
    animation-name: out3; 
    animation-duration: 4s; 
} 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes out3 { 
     from {bottom: 0px;} 
     to {bottom: -1000px;} 
} 

/* Standard syntax */ 
@keyframes t1 { 
    from {left: -1000px;} 
     to {left: 0px;} 
} 

.t2,.t3{ 
height: 50%; 
    width: 57%; 
    margin-left: auto; 
    margin-right: 0px; 
} 

.in1{ 
    -webkit-animation:forwards; 
    -webkit-animation-name: t1; /* Chrome, Safari, Opera */ 
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ 
    animation:forwards; 
    animation-name: t1; 
    animation-duration: 4s; 
} 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes t1 { 
     from {left: -1000px;} 
     to {left: 0px;} 
} 

/* Standard syntax */ 
@keyframes t1 { 
    from {left: -1000px;} 
     to {left: 0px;} 
} 
.in2{ 
    -webkit-animation:forwards; 
    -webkit-animation-name: t2; /* Chrome, Safari, Opera */ 
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ 
    animation:forwards; 
    animation-name: t2; 
    animation-duration: 4s; 
} 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes t2 { 
     from {top: -1000px;} 
     to {top: 0px;} 
} 

/* Standard syntax */ 
@keyframes t2 { 
     from {top: -1000px;} 
     to {top: 0px;} 
} 
.in3{ 
    -webkit-animation:forwards; 
    -webkit-animation-name: t3; /* Chrome, Safari, Opera */ 
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ 
    animation:forwards; 
    animation-name: t3; 
    animation-duration: 4s; 
} 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes t3 { 
     from {bottom: -1000px;} 
     to {bottom: 0px;} 
} 

/* Standard syntax */ 
@keyframes t3 { 
     from {bottom: -1000px;} 
     to {bottom: 0px;} 
} 

#logo >h1{ 
    color: white; 
} 

#logo >h3{ 
     width: 58%; 
    margin: 0 auto; 

} 


.t2 >img{ 
    margin-top: 11%; 
} 

#logo{ 
    margin-top: 40%; 
} 

.t3>ul{ 
    display: inline-table; 
    width: 80%; 
    margin: 0 auto; 
    margin-top: 50px; 
} 

.t3>ul>li{ 
    display: inline-table; 
    width: 33%; 

} 

.t3>ul>li>div>img{ 
    width: 53%; 
    margin-top: 25%; 
} 

#home{ 
    display: none !important; 
} 

#circle1,#circle2,#circle3{ 
    border-radius: 128px; 
    width: 150px; 
    height: 150px; 
    margin: 0 auto; 
    box-shadow: 10px 10px 5px #888888; 
} 

#circle1{ 
    background: #32325f; 
} 

#circle2{ 
    background: white; 
} 

#circle3{ 
    background: #ef9d34; 
} 


#case{ 
    display:none; 
    position:absolute; 
    top:0px; 
    height: 100%; 
    width: 100%; 
    z-index:99; 
} 

.stern1{ 
    background:blue; 
} 
.box { 
    opacity: 0; 
    -moz-transition: all 700ms ease-out; 
    -webkit-transition: all 700ms ease-out; 
    -o-transition: all 700ms ease-out; 
    transition: all 700ms ease-out; 
    -moz-transform: translate3d(0px, 200px, 0px); 
    -webkit-transform: translate3d(0px, 200px, 0px); 
    -o-transform: translate(0px, 200px); 
    -ms-transform: translate(0px, 200px); 
    transform: translate3d(0px, 200, 0px); 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden; 
    backface-visibility: hidden; 
} 

.box-active { 
    opacity: 1; 
    -moz-transform: translate3d(0px, 0px, 0px); 
    -webkit-transform: translate3d(0px, 0px, 0px); 
    -o-transform: translate(0px, 0px); 
    -ms-transform: translate(0px, 0px); 
    transform: translate3d(0px, 0px, 0px); 
} 

HTML

<section id="cases"> 

     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<div id="next"> 
    <h1>next</h1> 
</div> 
<div id="prev"> 
    <h1>prev</h1> 
</div> 

<!--page1--> 
    <div id="tcee1" class="t1 in1"> 
    <div id="logo"><img src="img/cee.png" id="cee"> 
      <div id="underline"></div> 
      <br> 
      <h1>BRINGING AN OFFLINE ENCOUNTER TO AN ONLINE RELATION</h1><br> 
      <h3>Every day Cee-Platform helps their customers to build a bridge between their offline and online marketing challenges.</h3> 
     </div> 
    </div> 
    <div id="tstern1" class="t1" style="background:blue;"> 
    </div> 
    <div id="tsky1" class="t1" style="background:black;"> 
    </div> 

    <div id="tcee2" class="t2 in2"> 
     <img src="img/ceedev.png"> 
    </div> 
    <div id="tstern2" class="t2"> 
    </div> 
    <div id="tsky2" class="t2"> 
    </div> 

    <div id="tcee3" class="t3 in3"> 
     <ul> 
      <li class="box"> 
       <div id="circle1"> 
       <img src="img/computer.png"> 
       </div> 
       <br> 
       <div id="underline"></div> 
       <h2>Responsiv</h2><br> 
       <p>My expierences with developing websites has learned me to make them structualy responsive from the ground up making it accesible for all platforms</p> 
      </li> 
      <li class="box"> 
       <div id="circle2"> 
       <img src="img/g.png"> 
       </div> 
       <br> 
       <div id="underline"></div> 
       <h2>SEO</h2><br> 
       <p>Optimizing your website to result with high results on googles googles list</p>    
      </li> 
      <li class="box"> 
       <div id="circle3"> 
       <img src="img/hand.png"> 
       </div> 
       <br> 
       <div id="underline"></div> 
       <h2>Storytelling</h2><br> 
       <p>With every website you want to tell a story, it doens't matter if you want to tell your visitor how aswesome your compeny or how important your goal is. I'll make it the best one out there</p> 
      </li> 
     </ul> 
    </div> 
<!--page2--> 
    <div id="tstern3" class="t3"> 
     <ul> 
      <li class="box"> 
       <div id="circle1"> 

       </div> 

      </li> 
      <li class="box"> 
       <div id="circle2"> 

       </div> 

      </li > 
      <li class="box"> 
       <div id="circle3"> 

       </div> 

      </li> 
     </ul> 
    </div> 
<!--page3--> 
    <div id="tcee3" class="t3"> 
     <ul> 
      <li class="box"> 
       <div id="circle1"> 
       </div> 

      </li> 
      <li class="box"> 
       <div id="circle2"> 

       </div>   
      </li> 
      <li class="box"> 
       <div id="circle3"> 
       </div> 
      </li> 
     </ul> 
    </div> 

</section> 

Answer 1

console_runner-d0a557e….js:1 element_top_position: 1050 
console_runner-d0a557e….js:1 window_bottom_position: 0 
console_runner-d0a557e….js:1 element_bottom_position: 1200 
console_runner-d0a557e….js:1 window_top_position: 0 
console_runner-d0a557e….js:1 element_top_position: 1050 
console_runner-d0a557e….js:1 window_bottom_position: 0 
console_runner-d0a557e….js:1 element_bottom_position: 1200 
console_runner-d0a557e….js:1 window_top_position: 0 
console_runner-d0a557e….js:1 element_top_position: 1050 
console_runner-d0a557e….js:1 window_bottom_position: 0 
console_runner-d0a557e….js:1 element_bottom_position: 1200 
console_runner-d0a557e….js:1 window_top_position: 0 
console_runner-d0a557e….js:1 element_top_position: 1050 
console_runner-d0a557e….js:1 window_bottom_position: 0 

if ((element_bottom_position >= window_top_position) && 
     (element_top_position >= window_bottom_position)) { 


element_top_position >= window_bottom_position 

これをtrueにすると、ロギングウィンドウまたは上記のテストケースの出力としてのみ実行されます。通常はアクティブなクラスが追加されない理由はゼロです。