Форум

hfts_rider · #1 (**permalink**) 16.08.2014, 23:56

Как правильно делать анимацию в несколько этапов?

Допустим я хочу что бы блок вначале поехал влево, потом вправо, потом вниз.

Как лучше всего это реализовать?

Правильно ли делать очередность анимаций вкладывая их в колбэки анимации?

$('.block').animate({'left':'100px'},400,function(){
$('.block').animate({'top':'200px'},400,function(){
и так далее...
});
});

Или все же лучше через переменную и интервал, и при завершении что бы очищала интервал и запускала другую функцию с интервалом?

И еще вопрос... Допустим я хочу что бы эта функция сработала только тогда когда пользователь прокрутил скролл ниже на 1000px.

Просто если написать if (scrollTop >= 1000){}, тогда оно будет ее все время повторять при прокрутке скрола дальше, а мне нужно что бы как только 1000 и больше, играет анимация 1 раз в не зависимости крутит скролл дальше пользователь или нет.

Пробовал так.

var animStart = 0;
$(window).on('scroll',function(){
  if(scrollTop >= 1000){
    animStart = 1;
  }
  
  if(animStart == 1){
    анимация..  
  }

});

Правильно ли это? или как лучше? (вроде бы в хроме норм отработала анимация, а в ИЕ непонятно что получилось))
Помогите пожалуйста.

MallSerg · #2 (**permalink**) 17.08.2014, 05:44

колбэки анимации правильный и понятный способ для последовательной анимации

Erolast · #3 (**permalink**) 17.08.2014, 07:36

Можно просто писать подряд.

<!DOCTYPE HTML>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  </head>
  
  <body>
    <div style="height: 100px; width: 100px; background-color: blue; position: absolute;"></div>
    <script>
      $("div").animate({'left':'100px'},400).animate({'top':'50px'},400);
    </script>
  </body>
</html>

jQuery сам отложит.

hfts_rider · #4 (**permalink**) 17.08.2014, 10:34

Хорошо. Но что делать с scrollTop? Как сделать так что бы после того как пользователь прокрутил на 1000 пикселей, запустилась анимация один раз в не зависимости от того, крутит пользователь дальше или нет, так как я понял что если ставить на событие скролл, оно будет все время запускать ее снова и снова?

Erolast · #5 (**permalink**) 17.08.2014, 15:04

<!DOCTYPE HTML>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  </head>
   
  <body>
    <div style="height: 100px; width: 100px; background-color: blue; position: absolute;"></div>
    <script>
      var animate_div = true;

      $(window).scroll(function() {
        if (window.animate_div && $(window).scrollTop() >= 10)
        {
          $("div").animate({'left':'100px'},400).animate({'top':'50px'},400);
          window.animate_div = false;
        }
      });
    </script>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
  </body>
</html>

hfts_rider · #6 (**permalink**) 17.08.2014, 15:16

ааа.. сбрасывать значение.. точно.. Спасибо!

hfts_rider · #7 (**permalink**) 17.08.2014, 23:53

Еще вопрос))
В ие8 при анимации пнг становится с черной обводкой...

Если задать картинке фон конкретный, тогда все найс.. но мне нужно прозрачный..
Пробовал использовать фильтр(градиент), ничего не изменилось...
Кто знает как решить проблему?

Форум

Справочник

Discord чат

Курсы javascript