javascript - 高さの 50% が画面の下部に達したときに要素を表示する

Question

Timothy Aaronのコードを使用して、下にスクロールしながら要素を 1 つずつ表示しています。それはうまく機能しますが、要素が一番下に達したときにのみ表示されます (これは、人々が白いページをしばらくスクロールすると、かなりの高さの DIV で問題が発生します...)。opacity: 150% に達したときに (要素の高さの 50% を意味する) 既に適用されるようにするには、コードで何を変更する必要がありますか? 私は試しif( bottom_of_window > ( bottom_of_object / 2 ) ){てみif( bottom_of_window > ( bottom_of_object - 50% ) ){ましたが、どちらも成功しませんでした。JSFiddle を参照してください : http://jsfiddle.net/mGdkj/

$(document).ready(function() {

    /* Hide all elements outside the visible window */
    $('body *').each( function(){

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

        if( bottom_of_window < top_of_object  ){

            $(this).addClass('hide').css({'opacity':'0'});

        }

    });

    /* Every time the window is scrolled ... */
    $(window).scroll( function(){

        /* Check the location of the desired elements */
        $('.hide').each( function(i){

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


                if( bottom_of_window > ( bottom_of_object + 20 )  ){

                    $(this).removeClass('hide').animate({'opacity':'1'},500);

                }

        }); 

    });

});