I have a grid of images that i want to fadein when the images come into view on scroll with JQuery fadeIn, here is my current code,JS Fiddle code
I have tried using this code but i cant get it working.
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;
}