show div element when it appears on screen

[Exoskeletor]

im trying to build code than animates some divs when they appear with the help of this codehttp://jsfiddle.net/tcloninger/e5qaD/so far i have write this code

Code:<script>$(document).ready(function() {/* Every time the window is scrolled ... */$(window).scroll( function(){/* Check the location of each desired element */$('#art-1').each( function(i){var bottom_of_object = $(this).position().top + $(this).outerHeight();var bottom_of_window = $(window).scrollTop() + $(window).height();/* If the object is completely visible in the window, fade it it */if( bottom_of_window > bottom_of_object ){        function showElement1() {$('#art-1').addClass(' art animate');}        function showElement2() {$('#art-2').addClass(' art animate');}        function showElement3() {$('#art-3').addClass(' art animate');}setTimeout(showElement1, 0); /* show immediately */setTimeout(showElement2, 500); /* show after half second */setTimeout(showElement3, 1000); /* show after one second */}});    $('#art-4').each( function(i){var bottom_of_object = $(this).position().top + $(this).outerHeight();var bottom_of_window = $(window).scrollTop() + $(window).height();/* If the object is completely visible in the window, fade it it */if( bottom_of_window > bottom_of_object ){function showElement4() {$('#art-4').addClass(' art animate');}        function showElement5() {$('#art-5').addClass(' art animate');}        function showElement6() {$('#art-6').addClass(' art animate');}setTimeout(showElement4, 0); /* show immediately */setTimeout(showElement5, 500); /* show after half second */setTimeout(showElement6, 1000); /* show after one second */}});});});</script>

but this code animates the element on page load not when they appear. do you know guys what i have done wrong?