javascript - Fade in elements when they come into viewport -

i'm trying fade in elements class of "fade-me" whenever elements come view. found fiddle: http://jsfiddle.net/tcloninger/e5qad/ , exact thing, adds opacity value repeatedly elements come view. create looping animation if i'm trying use velocity's transition slideupin instead of opacity. have following code:

$(document).ready(function() {      /* every time window scrolled ... */     $(window).scroll( function(){          /* check location of each desired element */         $('.hideme').each( function(i){              var bottom_of_object = $(this).offset().top + $(this).outerheight();             var bottom_of_window = $(window).scrolltop() + $(window).height();              /* if object visible in window, fade it */             if( bottom_of_window > bottom_of_object ){                  $(this).velocity('transition.slideupin', { stagger: 700 }).delay(1000)                  }         });      }); }); 

it works it loops slideupin animation. how make run animation once on element comes view?

toggle css class indicator , check it:

var $window = $(window); var $doc = $(document); var $hideme = $('.hideme');  $doc.ready(function () {      $window.scroll(function () {         var bottom_of_window = $window.scrolltop() + $window.height();          $hideme.each(function (i) {             var $elm = $hideme.eq(i);             var bottom_of_object = $elm.offset().top + $elm.outerheight();              if (bottom_of_window > bottom_of_object) {                 if (!$elm.hasclass('in-viewport')) {                     $elm.addclass('in-viewport');                     $elm.velocity('transition.slideupin', { stagger: 700 }).delay(1000);                 }             } else {                 $elm.removeclass('in-viewport');             }         });       });  });