Animate Some Divs Only Once

I am trying to animate some divs after the user scrolls to a specific position on the page. the problem is that i want it to happen only once. I used Boolean flags but it doesn't s

Solution 1:

From your question

after the user scrolls to a specific position on the page

Listen to scroll event

   $(document).ready(function() {
     var once = false;
     $(document).on('scroll', function(){
       if ($(window).scrollTop() > 760 && once==false){
         $('.hash').each(function(i) {
           $(this).fadeOut(0).delay(1000*i).fadeIn(1000);
         });
         once=true;
       }
     });
   )};

Alternative from comments. Check if element has a class (or attribute) or not. Below code checks if the element has the data-noanimate attribute. If yes it will not animate, if not it will animate and add data-noanimate so that it will animate once.

   $(document).ready(function() {
     $(document).on('scroll', function(){
       if ($(window).scrollTop() > 760){
         $('.hash').each(function(i) {
           if($(this).attr('data-noanimate') === undefined){
               $(this).attr('data-noanimate','true').fadeOut(0).delay(1000*i).fadeIn(1000);
           }
         });
       }
     });
   )};

Solution 2:

var once=false;
$(document).ready(function() {
  if ($(window).scrollTop() > 760 &&once==false)
  {
    $('.hash').each(function(i) {
    $(this).fadeOut(0).delay(1000*i).fadeIn(1000);});
    once=true;
  }
});

Your brackets on the end of the ready function were flipped.

Solution 3:

The other answer is correct, but it can be better like this:

$(function() {
    $(window).on('scroll', function(){
        if ($(window).scrollTop() > 760) {
            $('.hash').each(function(i) {
                $(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
            });
            // without boolean value,you can off `scroll` event
            $(window).off('scroll');
        }
    })
});