Jquery在查看元素时添加类

这段代码检查类是否在视图中，如果在视图中，它将添加一个类，但由于某些表面原因，它确实起作用。我试图仅当div在视图中时才将类框添加为活动状态

我已经做了一段时间了，你们能告诉我代码有什么问题吗？还有一个可能的解决办法或者我如何解决它

代码笔：

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

$（文档）.ready（函数（）{
$（“#下一步”）。单击（函数（）{
如果（$（'.in1、.in2、.in3'）。下一个（'.t1、.t2、.t3'）。长度）{
$（'.t1'）。设置动画({
左：'-1000px'
})
$（'.in1'）.removeClass（'in1'））
.next（“.t1”）
.addClass（'in1'）；
$（'.t2'）。设置动画({
右：'-1000px'
})
$（'.in2'）.removeClass（'in2'））
.next（“.t2”）
.addClass（'in2'）；
$（'.t3'）。设置动画({
底部：'-1000px'
})
$（'.in3'）.removeClass（'in3'））
.next（“.t3”）
.addClass（'in3'）；
}
});
$（'#prev'）。单击（函数（）{
if（$（'.in1、.in2、.in3'）.prev（'.t1、.t2、.t3'）.length）{
$（'.t1'）。设置动画({
左：'-1000px'
})
$（'.in1'）.removeClass（'in1'））
.prev（“.t1”）
.addClass（'in1'）；
$（'.t2'）。设置动画({
右：'-1000px'
})
$（'.in2'）.removeClass（'in2'））
.prev（“.t2”）
.addClass（'in2'）；
$（'.t3'）。设置动画({
底部：'-1000px'
})
$（'.in3'）.removeClass（'in3'））
.prev（“.t3”）
.addClass（'in3'）；
}
});
});
$.fn.isVisible=函数（）{
//我看得见吗？
//高度和宽度在可见性检测中不是明确必需的，底部、右侧、顶部和左侧是
//基本检查。如果图像为0x0，则在技术上不可见，因此不应将其标记为0x0。
//这就是为什么宽度或高度必须大于0的原因。
var rect=此[0]。getBoundingClientRect（）；
返回(
（矩形高度>0 | |矩形宽度>0）&&
rect.bottom>=0&&
rect.right>=0&&
rect.top为什么不使用.animate中的完成事件？
在一个动画完成后，可以轻松地将类添加到任何元素

参考：

例如：


var=1；
$（“按钮”）。单击（函数（）{
/*只是为了演示*/
如果（单击==4）{
单击=2；
$（“.inner”）.css（“左边距”、“0px”）；
}
否则单击++；
/* - */
如果（$（.box活动”）.length==1）$（.box活动”）.removeClass（“box活动”）；
$（“.inner”）.animate（{marginLeft:”-=250px“}，“slow”，function（）{
//动画完成后
//将框添加到活动类中
$（“分区a”+单击+）.addClass（“框活动”）；
});
})；
.outer{
宽度：250px；
高度：100px；
溢出：隐藏；
}
.内部{
宽度：1000px；
高度：100px；
左边距：0px；
}
.内部>分区{
宽度：250px；
高度：100px；
浮动：左；
}
.a1{
背景：蓝色；
}
.a2{
背景：红色；
}
.a3{
背景：绿色；
}
.a4{
背景：灰色；
}
.box激活{
背景：青色！重要；
}

下一个
为什么不使用.animate中的完成事件？
在一个动画完成后，可以轻松地将类添加到任何元素

参考：

例如：


var=1；
$（“按钮”）。单击（函数（）{
/*只是为了演示*/
如果（单击==4）{
单击=2；
$（“.inner”）.css（“左边距”、“0px”）；
}
否则单击++；
/* - */
如果（$（.box活动”）.length==1）$（.box活动”）.removeClass（“box活动”）；
$（“.inner”）.animate（{marginLeft:”-=250px“}，“slow”，function（）{
//动画完成后
//将框添加到活动类中
$（“分区a”+单击+）.addClass（“框活动”）；
});
})；
.outer{
宽度：250px；
高度：100px；
溢出：隐藏；
}
.内部{
宽度：1000px；
高度：100px；
左边距：0px；
}
.内部>分区{
宽度：250px；
高度：100px；
浮动：左；
}
.a1{
背景：蓝色；
}
.a2{
背景：红色；
}
.a3{
背景：绿色；
}
.a4{
背景：灰色；
}
.box激活{
背景：青色！重要；
}

下一个
你为什么要添加完整的项目？：P你能添加相关的代码吗？有时我会收到对html的请求：d你在一次又一次地重复单击函数……jquery有点乱。你只需要一次单击函数……然后是if语句。按照你的方式，我很惊讶事情会像你预期的那样发生。@Scott哈哈，好的e、 但是你能帮我解决我的问题吗？我建议你为什么要添加完整的项目？：P你能添加相关的代码吗？有时我会收到对html的请求：d你一遍又一遍地重复单击函数…jquery有点乱。你只需要一次单击函数..然后是if语句。按照你的方式，我很惊讶ed事情如你所料发生。@Scott haha，oke。但你能帮我解决我的问题吗？我建议我想在元素处于视图中时添加一个类，但它不起作用。转换代码工作正常。我不太确定你在找什么。还有动画开始的事件和在动画开始时触发的步骤/进度事件动画。如果您正在寻找动画中第一个像素可见的时刻，那么您应该尝试以下操作：获取用户窗口的高度和宽度，通过progresssteps获取当前动画元素的位置，并检查顶部/右侧/左侧/底部（取决于元素从哪一侧滑入）侧边在用户的视图中已可见确定，没有看到您已经在这样做。那么您要检查的是$（.box）是可见的，问题是这个类有3个div，所以它总是检查最后一个，如果它在初始时不可见，它总是会说它不可见，即使第一个是。添加类时也是一样。$（“.box”）.addClass/removeClass将应用于所有或仅应用于最后一个.box。如果检查它是否在“视图”框中，我的代码会将父对象及其子对象添加到视口中，这将最终导致