Проблема с анимацией в JQuery

Xo66uT

Одной из главных особенностей JQuery является то, что эта библиотека позволяется вам легко подчеркнуть ваш дизайн, анимировав некоторые элементы. Речь идет об отображении элементов, их движении и изменении цветов. Первое часто используется для скрытия информации, такой например, как заголовки картинок, то есть по умолчанию они скрыты, а при наведении курсора они проявляются. Часто также этот эффект применяются для того чтобы показать информацию и рейтинг скриншота при наведении на него.

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

Using JQuery animate stop

Вы можете решить эту проблему одним из следующих способ:

Использовать метод .stop(). Когда этот метод используется на элементе, он немедленно прекращает его анимацию, если конечно она есть. 

$("ol#gallery li").hover(function () {
  $(".thumb-meta", this).stop().animate({ bottom: '0px' }, 400);
},
function () {
  $(".thumb-meta", this).stop().animate({ bottom: '-22px' }, 400);
});

Другой способ решить проблему со «стеком» анимации, это использовать плагины, например hoverIntent. Этот плагин делает анимацию доступной только, если пользователь двигает мышью достаточно медленно.

Старайтесь не злоупотреблять с анимацией контента.

Поскольку Javascript функции очень легко реализовать с помощью JQuery, многие увлекаются анимацией  и доставляют этим пользователю немало неудобств. Допустим, удобно использовать JQuery для подгрузки изображений по мере прокрутки текста, это позволяет быстро прогрузить страницу с множество картинок. Но зачем показывать эти изображения при помощи анимации ?! В этом нет никакаго смысла.

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