My task was to make fade in for elements while scrolling, like this - http://layot.prestatrend.com/ I have made it with the help of such jQuery code I've gathered from two sources:
<script type="text/javascript">
$(document).ready( function() {
tiles = $('.ajax_block_product').fadeTo(0,0);
$(window).scroll(function(d,h) {
tiles.each(function(i) {
a = $(this).offset().top + $(this).height();
b = $(window).scrollTop() + $(window).height();
if (a < b) $(this).fadeTo(500,1);
});
});
function inWindow(s){
var scrollTop = $(window).scrollTop();
var windowHeight = $(window).height();
var currentEls = $(s);
var result = [];
currentEls.each(function(){
var el = $(this);
var offset = el.offset();
if(scrollTop <= offset.top && (el.height() + offset.top) < (scrollTop + windowHeight))
result.push(this);
});
return $(result);
}
inWindow('.ajax_block_product').fadeTo(0,1);
});
</script>
Is this an elegant solution or is there a way to make the code shorter and more elegant?