Анимация jQuery — метод animate()

Метод jQuery animate() используется для создания пользовательских анимаций. Метод animate() обычно используется для анимации числовых свойств CSS, например, ширины, высоты, поля, отступа, непрозрачности, позиции и т.д. Но нечисловые свойства, такие как цвет текста или цвет фона, нельзя анимировать с помощью базовой функциональности jQuery, для этого существуют сторонние плагины.

Синтаксис

Основной синтаксис метода jQuery animate() выглядит так:

$(selector).animate({ properties }, duration, callback);

Параметры метода animate() имеют следующие значения:

• Обязательный параметр properties определяет свойства CSS для анимации.
• Необязательный параметр duration указывает продолжительность анимации. Длительность может быть указана либо с использованием одной из предопределенных строк «slow» или «fast», либо в количестве миллисекунд; более высокие значения указывают на более медленную анимацию.
• Необязательный параметр обратного вызова (callback) - это функция, вызываемая после завершения анимации.

Вот простой пример метода jQuery animate(), который анимирует перемещение изображения из его исходного положения вправо на 300 пикселей при нажатии кнопки:

<script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
      $("img").animate({
        left: 300
      });
    });
  });
</script>

Одновременная анимация нескольких свойств

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

<script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
      $(".box").animate({
        width: "300px",
        height: "300px",
        marginLeft: "150px",
        borderWidth: "10px",
        opacity: 0.5
      });
    });
  });
</script>

Анимация свойств элемента по очереди (последовательная анимация)

Вы также можете анимировать несколько свойств элемента по очереди используя возможность «сцепления» методов jQuery. Мы узнаем больше о том, что такое сцепление методов, в следующей главе.

В следующем примере демонстрируется анимация jQuery с очередями или цепочками, где каждая анимация начинается после завершения предыдущей анимации элемента.

<script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
      $(".box")
        .animate({width: "300px"})
        .animate({height: "300px"})
        .animate({marginLeft: "150px"})
        .animate({borderWidth: "10px"})
        .animate({opacity: 0.5});
    });
  });
</script>

Анимация свойств с относительными значениями

Вы также можете определить относительные значения для анимируемых свойств. Если значение указано с начальным префиксом += или -=, то целевое значение рассчитывается путем сложения или вычитания заданного числа из текущего значения свойства.

<script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
      $(".box").animate({ 
        top: "+=50px",
        left: "+=50px",
        width: "+=50px",
        height: "+=50px"
      });
    });
  });
</script>

Анимация свойств с предопределенными значениями

В дополнение к числовым значениям, каждое свойство может принимать строки 'show', 'hide' и 'toggle'. Это будет очень полезно в ситуации, когда вы просто хотите анимировать свойство от его текущего значения до начального значения и наоборот.

<script type="text/javascript">
  $(document).ready(function(){
    $("button").click(function(){
      $(".box").animate({
        width: 'toggle'
      });
    });
  });
</script>