在畫面上淡入淡出所有東西都是1而不是1加1

Question

我在動畫中使用了淡入淡出效果，因此當窗口中的對象完全可見時，淡入淡出。但是，只要第一個對象消失在其他方面，其他一切都會消失，從而使期望的效果過時。

這裏是我的代碼：

$(document).ready(function() { 
 
    $(window).scroll(function() { 
 
    $('.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' 
 
     }, 1500); 
 
     } 
 
    }); 
 
    }); 
 
});

.hideme { 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="post-preview"> 
 
    <div class="hideme"> 
 
    <a href="#"> 
 
     <h3 class="post-title">The night sky is more than beauty</h3> 
 
     <h4 class="post-subtitle">If looking into the sky is not pretty enough...</h4> 
 
    </a> 
 
    <p class="post-meta">Posted by <a href="#">Ricardo Castillo</a> on September 2, 2016 at UTSA</p> 
 
    </div> 
 
</div> 
 
<div class="post-preview"> 
 
    <div class="hideme"> 
 
    <a href="#"> 
 
     <h3 class="post-title">Your account has been compromised</h3> 
 
     <h4 class="post-subtitle">Mr. Robot inspired; cyber security fears</h4> 
 
    </a> 
 
    <p class="post-meta">Posted by <a href="#">Ricardo Castillo</a> on August 9, 2016 at UTSA</p> 
 
    </div> 
 
</div> 
 
<div class="post-preview"> 
 
    <div class="hideme"> 
 
    <a href="#"> 
 
     <h3 class="post-title">Why the future scares me</h3> 
 
     <h4 class="post-subtitle">A technological perspective to the future</h4> 
 
    </a> 
 
    <p class="post-meta">Posted by <a href="#">Ricardo Castillo</a> on September 3, 2016 at UTSA</p> 
 
    </div> 
 
</div>

我找不到有什麼不對的，並且非常感激手。

Answer 1

這有效，但是腳本值太高。消除窗口高度的總和越接近預期的效果。它一直在工作，幾乎看不見。