我如何在 jQuery 中滚动滚动图像网格？

Question

我有一个图像网格，当图像通过 JQuery 淡入滚动显示时，我想淡入，这是我当前的代码，JS Fiddle code

我已尝试使用此代码，但无法正常工作。

jQuery

$(document).ready(function() {

    $(window).scroll( function(){

        $(".vw").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 ){

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

            }

        }); 

    });

});

HTML

<div id="grid">
    <div class="vw">
        <img src="http://th08.deviantart.net/fs71/200H/i/2012/190/b/7/bastique_graffiti_art_car__02__golf_mkv_r32_by_bastiqueart-d56k7iu.jpg" width="300" height="169" />
    </div>
    <div class="vw">
        <img src="http://th08.deviantart.net/fs71/200H/i/2012/190/b/7/bastique_graffiti_art_car__02__golf_mkv_r32_by_bastiqueart-d56k7iu.jpg" width="300" height="169" />
    </div>
    <div class="vw">
        <img src="http://th08.deviantart.net/fs71/200H/i/2012/190/b/7/bastique_graffiti_art_car__02__golf_mkv_r32_by_bastiqueart-d56k7iu.jpg" width="300" height="169" />
    </div>
    <div class="vw">
        <img src="http://th08.deviantart.net/fs71/200H/i/2012/190/b/7/bastique_graffiti_art_car__02__golf_mkv_r32_by_bastiqueart-d56k7iu.jpg" width="300" height="169" />
    </div>
    <div class="vw">
        <img src="http://th08.deviantart.net/fs71/200H/i/2012/190/b/7/bastique_graffiti_art_car__02__golf_mkv_r32_by_bastiqueart-d56k7iu.jpg" width="300" height="169" />
    </div>
    <div class="vw">
        <img src="http://th08.deviantart.net/fs71/200H/i/2012/190/b/7/bastique_graffiti_art_car__02__golf_mkv_r32_by_bastiqueart-d56k7iu.jpg" width="300" height="169" />
    </div>
</div>

CSS

  .vw {
        position: relative;
        float:left;
        padding:0px 0px 0px 0px;
        width:300px;
        height:169px;
    }
    #grid {
        margin: 0 auto;
        background-color:green;
        width:900px;
        height:2366px;
    }

Answer 1

试试 jquery.appear 插件：http://morr.github.io/appear.html

它添加了一个您可以绑定到的 appear 事件。

<div id='scrollOver'>This might be lower on the page</div>
$('#scollOver').appear();
$('#scrollOver').on('appear', function(event, $all_appeared_elements) {
  // this element is now inside browser viewport
  alert('Now visible!');
});

编辑：这里有一个小提琴供你尝试：http://jsfiddle.net/nzt5hqd2/