如何編輯jQuery動畫以顯示在元素的中間？

Question

I am using this code from JS Fiddle to create a fade animation with elements on a web page.現在，只要窗口中顯示完整元素，元素就會淡入。有什麼辦法可以編輯這個，所以我可以更快地觸發淡出動畫？理想情況下，當只有一半的元素可見而不是整個元素時，將會觸發淡入淡出的動畫。

這裏是觸發這個動畫的JavaScript：

/* every time the window is scrolled ... */ 
$(window).scroll(function(){ 
    /* check the location of each desired element */ 
    $('.fade-in').each(function(i){ 
     var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
     var bottom_of_window = $(window).scrollTop() + $(window).height(); 
     /* if the object is completely visible in the window, fade it in */ 
     if(bottom_of_window > bottom_of_object){ 
      $(this).animate({'opacity':'1'},600); 
     } 
    }); 
}); 
}); 

Answer 1

更改bottom_of_object價值的東西少那麼它的原始高度

var bottom_of_object = $(this).offset().top + $(this).outerHeight()/3; //we dived by 3 here at the end. 

Answer 2

嘗試一半的bottom_of_objekt無論是在如果部分或在計算

/* every time the window is scrolled ... */ 
    $(window).scroll(function(){ 
     /* check the location of each desired element */ 
     $('.fade-in').each(function(i){ 
      var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
      var bottom_of_window = $(window).scrollTop() + $(window).height(); 
      /* if the object is completely visible in the window, fade it in */ 
      if(bottom_of_window > (bottom_of_object/2)){ 
       $(this).animate({'opacity':'1'},600); 
      } 
     }); 
    }); 
    });