Как анимировать div только один раз?

Question

У меня есть два div (action,action2), которые будут анимировать, если количество прокрутки превышает 100. Что я хочу, это action2 для анимации с 40% справа и снизу, анимируйте до 30% правого и нижнего, а затем 40% правого и снизу. Я попытался с ниже кодом

$(document).ready(function() { 
    $(document).scroll(function() { 
     var t = $(document).scrollTop(); 
     if (t > 100) { 
      $('#action').stop().animate({ 
       right: "50%", 
       bottom: "50%" 
      }, 1000, "easeOutBounce"); 
      $('#action2').stop().animate({ 
       right: "40%", 
       bottom: "40%" 
      }, 1000, "easeOutBounce"); 
      $('#action2').stop().delay(800).animate({ 
       right: "30%", 
       bottom: "30%" 
      }, 1000, "easeOutBounce"); 
      $('#action2').stop().animate({ 
       right: "40%", 
       bottom: "40%" 
      }, 1000, "easeOutBounce"); 
     } else { 
      $('#action').stop().animate({ 
       right: "0", 
       bottom: "0" 
      }, 1000, "easeOutBounce"); 
      $('#action2').stop().animate({ 
       right: "0", 
       bottom: "0" 
      }, 1000, "easeOutBounce"); 
     } 
    }); 
}); 

это делает #action2 ДИВ анимировать несколько time.I хотят, чтобы оживить один раз, как в коде, как от 40% до 30%, то 40%, что и все. Что не так в этом коде. Вот скрипка

Проверьте это step1 для 2 и 3 см. Комментарии У меня нет репутации, чтобы разместить более двух ссылок и изображений.

Answer 1

Замените эту строку

$(document).scroll(function() 

с этим одним

$(document).one("scroll", function() 

one() будет работать только событие один раз, в отличие от scroll() или on().

documentation

---

я не заметил, что вы имели условия для одушевленных в вашем случае. В этом случае, попробуйте это (добавить переменную для отслеживания ли он побежал, а затем запустить на его основе):

var done = false; 
$(document).scroll(function() { 
    var t = $(document).scrollTop(); 
    if (t > 100 && !done) { 
     done = true; 
     $('#action').stop().animate({ 

---

С большим количеством разъяснений по этому вопросу, кажется, что вы просто ищете различные функциональные возможности, основанные на том, если div уже вставлены или нет. Попробуйте что-то вроде этого:

fiddle

var actionsUp = false; 
$(document).scroll(function() { 
    var t = $(document).scrollTop(); 
    if (t > 100) { 
     $('#action').stop().animate({ 
      right: "50%", 
      bottom: "50%" 
     }, 1000, "easeOutBounce"); 
     $a2 = $('#action2'); 
     if (actionsUp) { 
      $a2.stop().animate({ 
       right: "30%", 
       bottom: "30%" 
      }, 1000, "easeOutBounce", function() { 
       $a2.animate({ 
        right: "40%", 
        bottom: "40%" 
       }, 1000, "easeOutBounce"); 
      }); 
     } else { 
      $a2.stop().animate({ 
       right: "40%", 
       bottom: "40%" 
      }, 1000, "easeOutBounce"); 
     } 
     actionsUp = true; 
    } else { 
     actionsUp = false; 
     $('#action').stop().animate({ 
      right: "0", 
      bottom: "0" 
     }, 1000, "easeOutBounce"); 
     $('#action2').stop().animate({ 
      right: "0", 
      bottom: "0" 
     }, 1000, "easeOutBounce"); 
    } 
});