Question

我有一个图像网格，我想在使用JQuery fadeIn滚动查看图像时淡入淡出，这是我当前的代码，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/

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

1 个答案: