我怎样才能让我的div退色与jquery

Question

我试图淡入div，当它滚动到视图从0.4到1，但工作正常，但我得到它退色到0.4时，用户有滚动过去。我怎样才能做到这一点？

tiles = $("#project_images img").fadeTo(0, 0.4); // set the default image opacity to semi transparent 

    $(window).scroll(function(d,h) { 
     tiles.each(function(i) { 
      a = $(this).offset().top + $(this).height(); 
      b = $(window).scrollTop() + $(window).height(); 
      if (a < b) $(this).fadeTo(1040,1); // when scrolling down over the image fade it IN. 
      if (a > b) $(this).fadeTo(1040, 0.4); // when scrolling down over the image fade it OUT. 
     }); 
    }); 

Answer 1

这里实现你的需求的一种方式。我没有适应你的逻辑，而是从头开始考虑它。它归结为：

/** 
* on scroll, for each image do the following 
*/ 

var visible = /** is the image at all visible in the viewport? */ ; 
var allVisible = /** is the image totally within the viewport? */ ; 

if (visible) { 
    if (allVisible) { 
     $(this).stop().fadeTo(1040, 1); 
    } else { 
     $(this).stop().fadeTo(1040, 0.4); 
    } 
} 

jQuery的stop()用于防止在图像上排队fadeTo动画的积累。我在演示中的代码为了可读性牺牲了计算的次数，但随时轻松刷新并按您的喜好进行优化。

• DEMO