Question

我正在使用jQuery检查屏幕上是否有元素。我正在通过它的类选择元素，因为我有多个元素应该在不同的时刻做同样的事情。当一个元素出现在屏幕上时，我正在改变它（fadeIn +动画向上滑动）。

$(window).scroll(function(){
  $(".material-slide-up").each(function(){
    if(isScrolledIntoView($(this))) {
      $(this).fadeIn(1000);
      $(this).addClass("slideInUp animated");
    }
  });
});

当我运行当前代码时，所有具有相同类的元素都会被更改。我认为这是因为我正在使用“每个”。

有没有办法只更改屏幕上同一个类的一个元素？

Answer 1

像这样的小帮手功能很棒

$.fn.inView = function(){
if(!this.length) return false;
var rect = this.get(0).getBoundingClientRect();

return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight ||  document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);

};

现在，你没有分享你的DOM，所以我们将使用我的，这里是笔的链接，向下滚动以查看效果。

调用函数应如下所示

 $(window).on('scroll',function(){ 
 var imgs = $('img');
 imgs.each(function(){
    var $this = $(this);
    $this.inView() && $this.addClass('magictime vanishIn');
}) ;
});

http://codepen.io/damianocel/pen/zBLEXR

如果您显示完整的代码，我可以为您调整，但现在应该很容易理解。

jQuery从类中更改单个元素

1 个答案: