在向下滚动时淡入，在向上滚动时淡出 – 基于窗口中的元素位置

当它们在窗口中完全可见时，我试图让一系列元素在向下滚动时淡入。 如果我继续向下滚动，我不希望它们淡出，但如果我向上滚动，我确实希望它们淡出。

这是我发现的最接近的jsfiddle。 http://jsfiddle.net/tcloninger/e5qaD/

$(document).ready(function() { /* Every time the window is scrolled ... */ $(window).scroll( function(){ /* Check the location of each desired element */ $('.hideme').each( function(i){ var bottom_of_object = $(this).position().top + $(this).outerHeight(); var bottom_of_window = $(window).scrollTop() + $(window).height(); /* If the object is completely visible in the window, fade it it */ if( bottom_of_window > bottom_of_object ){ $(this).animate({'opacity':'1'},500); } }); }); }); 

它完全按照我想要的向下滚动，但如果我向上滚动它们，我也希望元素淡出。

我试了这个没有运气。

  if( bottom_of_window > bottom_of_object ){ $(this).animate({'opacity':'1'},500); } else { $(this).animate({'opacity':'0'},500); } 

非常感谢您花时间看这个。

Answer 1

你的尝试不起作用的原因是因为两个动画（淡入和淡出）相互作用。

在对象变得可见之前，它仍然是不可见的，因此淡出的动画将会运行。 然后，当同一个对象变得可见时，一小段时间后，淡入动画将尝试运行，但淡出仍然在运行。 所以他们会相互对抗，你什么也看不见。

最终，对象将变得可见（大部分时间），但这需要一段时间。 如果你使用滚动条按钮上的箭头按钮向下滚动，动画会有效，因为你会使用更大的增量滚动，创建更少的滚动事件。

---

足够的解释，解决方案（JS，CSS，HTML）：

 $(window).on("load",function() { $(window).scroll(function() { var windowBottom = $(this).scrollTop() + $(this).innerHeight(); $(".fade").each(function() { /* Check the location of each desired element */ var objectBottom = $(this).offset().top + $(this).outerHeight(); /* If the element is completely within bounds of the window, fade it in */ if (objectBottom < windowBottom) { //object comes into view (scrolling down) if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);} } else { //object goes out of view (scrolling up) if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);} } }); }).scroll(); //invoke scroll-handler on page-load }); 

 .fade { margin: 50px; padding: 50px; background-color: lightgreen; opacity: 1; } 

  
 
Fade In 01
 
Fade In 02
 
Fade In 03
 
Fade In 04
 
Fade In 05
 
Fade In 06
 
Fade In 07
 
Fade In 08
 
Fade In 09
 
Fade In 10
  

Answer 2

我稍稍调整了你的代码并使其更加健壮。 在渐进增强方面，最好在JavaScript中使用所有淡入逻辑。 在myfunksyde的示例中，任何没有JavaScript的用户都会因为opacity: 0;而看不到任何内容opacity: 0; 。

  $(window).on("load",function() { function fade() { var animation_height = $(window).innerHeight() * 0.25; var ratio = Math.round( (1 / animation_height) * 10000 ) / 10000; $('.fade').each(function() { var objectTop = $(this).offset().top; var windowBottom = $(window).scrollTop() + $(window).innerHeight(); if ( objectTop < windowBottom ) { if ( objectTop < windowBottom - animation_height ) { $(this).html( 'fully visible' ); $(this).css( { transition: 'opacity 0.1s linear', opacity: 1 } ); } else { $(this).html( 'fading in/out' ); $(this).css( { transition: 'opacity 0.25s linear', opacity: (windowBottom - objectTop) * ratio } ); } } else { $(this).html( 'not visible' ); $(this).css( 'opacity', 0 ); } }); } $('.fade').css( 'opacity', 0 ); fade(); $(window).scroll(function() {fade();}); }); 

在这里看到： http ： //jsfiddle.net/78xjLnu1/16/

干杯，马丁

Answer 3

我知道现在已经很晚了，但是我采用原始代码并更改了一些东西来轻松控制css。 所以我使用addClass（）和removeClass（）创建了一个代码

这里的完整代码： http ： //jsfiddle.net/e5qaD/4837/

  if( bottom_of_window > bottom_of_object ){ $(this).addClass('showme'); } if( bottom_of_window < bottom_of_object ){ $(this).removeClass('showme'); 

Answer 4

对不起，这是老线程，但有些人仍然需要这个，我猜，

注意：我使用Animate.css库为fade设置了动画效果。

我使用了你的代码并添加了.hidden类（使用bootstrap的隐藏类）但你仍然可以定义.hidden { opacity: 0; } .hidden { opacity: 0; }

 $(document).ready(function() { /* Every time the window is scrolled ... */ $(window).scroll( function(){ /* Check the location of each desired element */ $('.hideme').each( function(i){ var bottom_of_object = $(this).position().top + $(this).outerHeight(); var bottom_of_window = $(window).scrollTop() + $(window).height(); /* If the object is completely visible in the window, fade it it */ if( bottom_of_window > bottom_of_object ){ $(this).removeClass('hidden'); $(this).addClass('animated fadeInUp'); } else { $(this).addClass('hidden'); } }); }); }); 

另一个注意事项：将此应用于容器可能会导致它出现故障。