Сегодня я решил продемонстрировать пример того, как можно достичь одинакового анимационного эффекта разными средствами, а именно jQuery и CSS3. Ничего сложного в этом нет, поэтому я не буду зацикливаться на реализации, лишь кратко опишу ее. Больше внимания я уделю преимуществам/недостаткам каждого метода друг перед другом.
Для примера будет реализована анимированная замена изображения при наведении. Для этого в ссылку завернем два одинаковых по размеру изображения и разместим их один поверх другого. При наведении на ссылку, будет плавно увеличиваться прозрачность верхнего изображения, таким образом «проявляя» картинку, размещенную под ним. В CSS для придания плавности данному процессу предназначено свойство transition-duration. Сам код выглядит следующим образом.
#css img{
-webkit-transition-duration:1s;
-moz-transition-duration:1s;
-ms-transition-duration:1s;
-o-transition-duration:1s;
transition-duration:1s;
}
#css:hover .forward{
opacity:0;
}
В jQuery же мы используем функцию fadeTo, которая предназначена непосредственно для плавного изменения прозрачности. Но перед применением функции, сначала необходимо отчистить очередь эффектов, примененных к объекту, которая может возникнуть из-за частого проведения курсора над ссылкой. Для этого служит метод stop().
Изменять прозрачность мы будем до нуля и обратно при возникновении двух событий: mouseenter и mouseleave, соответственно. Код приведен ниже.
$("#js").on("mouseenter", function(event){
$(this).children(".forward").stop().fadeTo(1000, 0);
});
$("#js").on("mouseleave", function(event){
$(this).children(".forward").stop().fadeTo(1000, 1);
});
Теперь пару слов о разнице между этими методами.
В первую очередь, CSS расходует меньше памяти, и обрабатываться быстрее, но в большинстве рядовых случаев разница не будет заметна. Эти факторы могут отыгрывать важную роль лишь в том случае, если на сайте присутствует значительное количество анимированных элементов и/или имеет много сложных js скриптов.
С другой стороны, CSS3, а transition-duration свойство именно третьей версии CSS, в IE обрабатывается, начиная только с 10-й версии. Здесь в отличии от CSS jQuery будет работать и в более ранних версиях.
Если конечно увеличение производительности сайта любой ценой Ваш случай, то тут можно воспользоваться условным комментарием со следующим содержанием:
<!--[if lte IE 9]> <script src=”./js/script.js”></script> <[endif]-->
где «if lte IE 9» - условие, что текущим браузером является Internet Explorer девятой версии или младше. При срабатывании это условия будет подключен файл script.js, который содержит приведенный выше jQuery код. Таким образом, решается проблема совместимости IE младше 10-й версии с CSS3.
Помимо всего прочего, выбранный путь решения задачи, конечно же, может зависеть от предпочтений того, кто эту задачу будет решать.
На этом все. Благодарю за внимание!