jQuery в деталях. Анимация.

Привет, друзья!

Сегодня поговорим об анимации методами jQuery.
Ни для кого не является новостью, что анимация элементов на странице (в разумных пределах конечно) делает сайт более динамичным и живым, а следовательно более привлекательным для пользователей.
В некоторых случаях без нее вообще не обойтись, например вам нужно скрыть элемент, а в определенный момент, когда произойдет какое-либо событие, показать его.

Для работы с анимацией в jQuery реализован целый набор функций, упрощающих жизнь программисту. Приведу в таблице основные, на мой взгляд, методы с пояснениями.

Структура	Описание
`.show([duration], [easing], [callback])`	Показать скрытые элементы
`.hide([duration], [easing], [callback])`	Скрыть видимые элементы
`.toggle([duration], [callback])`	Переключатель видимости. `show() -> hide()` или `hide() -> show()`
`.slideUp([duration], [callback])`	Скрыть элемент с эффектом слайда
`.slideDown([duration], [callback])`	Показать элемент с эффектом слайда
`.slideToggle([duration], [callback])`	Переключатель слайдов. Заменяет `slideUp()->slideDown()` или наоборот.
`.fadeIn([duration], [callback])`	Показать элемент с эффектом затухания.
`.fadeOut([duration], [callback])`	Скрыть элемент с эффектом затухания.
`.fadeToggle([duration], [easing], [callback])`	Переключатель для .fade-эффектов. Заменяет `fadeIn()->fadeOut()` или наоборот.
`.animate(properties, [duration], [easing], [callback])`	Меняет CSS свойства properties через заданный промежуток времени с различными эффектами easing

Каждая функция, кроме .animate() может вызываться как без параметров, так и с параметрами duration, easing и complete.
где:
duration - продолжительность действия эффекта. Может быть числом(мс), либо строкой 'slow', 'fast'
easing - применяемый эффект - строка типа 'linear', 'swing', 'easeInQuad' ит.п.
complete - функция обратного вызова, которая стартует по завершению анимации.

Как обычно, все познается на практике и анимация не будет исключением.

Как это работает

Задача: Сделать так, чтобы элемент .circle скрылся при клике, а вместо него показалась картинка.

HTML предельно простой:

<style>
    .circle{
         width: 150px;
         height: 150px;
         border-radius: 75px;
         border: 2px solid black;
    }
    .hide{
         display: none;
    }     
</style>
<div class="circle"></div>   
<img src="http://local/files/black-ball.png" class="ball_1 hide">

jQuery - код:

<script>
      $(function(){             
            $('.circle').on('click', function(){
                 $(this).hide();
                 $('.ball_1').show();
            });             
       });
</script>

Результат:

Абсолютно идентичный результат будет, если применить функцию .toggle() к обоим элементам:

А если добавить в функции show()/hide() параметр duration, который отвечает за продолжительность,

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

Задача: Реализовать плавную смену картинок при клике по элементу.

Если вы хотите, чтобы на месте одного элемента плавно появлялся другой, то нужно использовать функции .fadeIn() и .fadeOut()

Немножко подправим наш HTML-код и стили:

<style>
      .ball_1, .ball_2{
            position: absolute;
            top: 100px;
            left: 100px;           
       }        
       .hide{
            display: none;
       }   
</style>
<img src="http://local/files/black-ball.png" class="ball_1">
<img src="http://local/files/black-ball-uf.png" class="ball_2 hide">

jQuery:

$(function(){             
      $('.ball_1').on('click', function(){
            $(this).fadeOut(1500);
            $('.ball_2').fadeIn(1500);
      });             
});

Результат:

А что же можно сделать с методами slideUp() и slideDown()?

Задача: Реализовать простейшее выпадающее меню.

Как мы помним slideToggle() может заменить выполнение обоих методов, то есть если элемент был скрыт, то в действие вступит slideDown() и наоборот.

Итак, HTML-код:

<div class="wrap">
      <div class="menu">КАКОЙ</div>
      <div class="submenu"><img src="http://local/files/xp-start.jpg"></div>
</div>
<div class="wrap">
      <div class="menu">ПРЕКРАСНЫЙ</div>
      <div class="submenu"><img src="http://local/files/xp-run.gif"></div>
</div>
<div class="wrap">
      <div class="menu">ДЕНЬ!</div>
      <div class="submenu"><img src="http://local/files/xp-fail.jpg"></div>
</div>

CSS для лучшей читаемости приведу отдельно:

<style>
     .wrap{
            float: left;
            width: 240px;
     }
     .menu, .submenu {
            padding: 5px;
            text-align: center;            
            font-size: 20px;  
            color: white;
            font-weight: bold;
     }
     .wrap:first-child .menu, .wrap:first-child .submenu{
            background-color: yellowgreen;
            border: solid 1px green;
     }
     .wrap:nth-child(2) .menu, .wrap:nth-child(2) .submenu{
            background-color: pink;
            border: solid 1px red;
     }
     .wrap:last-child .menu, .wrap:last-child .submenu{
            background-color: #800;
            border: solid 1px black;
     }

     .submenu {
            padding: 0px;
            display: none;
     } 
</style>

jQuery код будет крайне лаконичным:

<script>
     $(function(){             
           $(".menu").click(function(){
                $(this).next(".submenu").slideToggle("slow");
           });           
     });
</script>

В результате получим такую анимашку:

Задача: имитировать гравитацию с помощью функции .animate() на примере игры в мяч.

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

Для начала запишем HTML код:

<style>
img{
    margin-top: 250px;           
}      
</style>
<img src="http://local/files/color-ball.jpg">

jQuery:

<script>
    $(function(){   
         $("img").mouseenter( function(){  
              $(this).animate({marginTop:"0px"},250, 'linear', function(){
                   $(this).stop().animate({marginTop:"250px"},500, 'swing');
              });    
         });           
    });
</script>

В результате попадаем назад в детство :)