jQueryアニメーションを要素の中央に表示するにはどうすれば編集できますか？

Question

I am using this code from JS Fiddle to create a fade animation with elements on a web page.今は、要素がウィンドウ内で一度表示されると、要素はフェードインします。これを編集する方法はありますか？すぐにフェードアニメーションをトリガーできますか？理想的には、要素全体の代わりに要素の半分だけが表示されている場合、フェードアニメーションがトリガされます。ここで

はこのアニメーションをトリガーするJavaScriptです：半分あなたの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){ 
      $(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

試してみることがあります少ないし、何かに一部の場合または計算で

/* 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); 
      } 
     }); 
    }); 
    });