JQuery/Javascript淡入淡出滚动不起作用

我一直在研究一些内容，需要图像在滚动底部淡入。我已经附加了我的JSFiddle，希望得到一些帮助。看起来，当我删除类时，图像显得很好。不知道该怎么办。JQuery/Javascript淡入淡出滚动不起作用

HTML

<div id="slide1"> 
      <div class="content"> 
       <h2>This is a title</h2> 
        <div class="quotes_container"> 
        <h3 class="quotes">“Below this content, an image is supposed to fade in.” </h3> 
         <div class="fadeInBlock"><img src="http://www.strangetravel.com/images/content/120195.jpg"></div> 
       </div> 
      </div> 
     </div>

的Javascript

$(function() { 
    $(window).scroll(function(){ 


     $('.fadeInBlock').each(function(i){ 

      var bottom_of_object = $(this).position().top + $(this).outerHeight(); 
      var bottom_of_window = $(window).scrollTop() + $(window).height(); 

      /* Adjust the "200" to either have a delay or that the content starts fading a bit before you reach it */ 
      bottom_of_window = bottom_of_window + 200; 

      if(bottom_of_window > bottom_of_object){ 

       $(this).animate({'opacity':'1'},1000); 

      } 
     }); 

    }); 
});

CSS

.fadeInBlock {opacity:0;}

来源

2017-03-02 Petey

你没有添加jQuery。这是应该如何工作？ https://jsfiddle.net/1ak7q0kg/4/ –

@Petey很确定你混合了不透明度100％（1）和不透明度0（0％）。淡入淡出你想要的不透明度为1而不是0.如果某件物品是100％不透明的，你根本看不到它，它是一面坚固的墙。如果某些东西是0％不透明，那么它是完全透明的，完全透明。 –

@MichaelCoker这就是它应该看起来。我在我的文档中调用了JQuery，但仍然没有得到您的结果。 – Petey

下面的代码工作：

$(function() { 
    $(window).scroll(function(){ 


     $('.fadeInBlock').each(function(i){ 

      var bottom_of_object = $(this).position().top + $(this).outerHeight(); 
      var bottom_of_window = $(window).scrollTop() + $(window).height(); 

      /* Adjust the "200" to either have a delay or that the content starts fading a bit before you reach it */ 
      bottom_of_window = bottom_of_window + 200; 

      if(bottom_of_window > bottom_of_object){ 

       $(this).animate({'opacity':'1'},1000); 

      } 
     }); 

    }); 
});

结果中不包含JQUERY所以使用

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

最后uour HTML：我包括从HTTPS源的图像，因为它是在的jsfiddle抛出一个不安全的起源错误。

<div id="slide1"> 
     <div class="content"> 
      <h2>This is a title</h2> 
       <div class="quotes_container"> 
       <h3 class="quotes">“Below this content, an image is supposed to fade in.” </h3> 
        <div class="fadeInBlock"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"></div> 
      </div> 
     </div> 
    </div>

This works。在JS Fiddle上测试它。

来源

2017-03-02 18:53:06

JQuery/Javascript淡入淡出滚动不起作用

回答

相关问题