Плавная анимация при наведении CSS или JavaScript
827материалов
228тем на форуме
3003комментария
6152пользователя

Плавная анимация при наведении CSS или JavaScript


Плавную анимацию при наведении на объект можно сделать как с помощью JavaScript, так и с помощью CSS. На Урааа уже был материал, как сделать плавный hover на JQuery. Здесь же будет именно вариант плавной анимации на CSS.

Напомним, как это делалось на JavaScript
Код
<script type="text/javascript">  
$.fn.rayHover = function () {  
  $(this).fadeTo(100,0.6);  
  return $(this).hover(  
  function(){$(this).stop().fadeTo("slow",1)},  
  function(){$(this).stop().fadeTo("slow", 0.6)}  
  );  
}  
$(".excoban").rayHover();  
</script>

На CSS
Здесь все проще. Просто добавьте, например, в класс a псевдокласс :hover в Таблице стилей. Затем добавим:

Код
-webkit-transition: background 0.5s ease;  
-moz-transition: background 0.5s ease;  
transition: background 0.5s ease;

При этом 0.5s - время анимации в секундах. Таким образом у нас получилось:
Код
a:hover {  
background:  
-webkit-transition: background 0.5s ease;  
-moz-transition: background 0.5s ease;  
transition: background 0.5s ease;

ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 04.06.2014 в 07:11
Материал просмотрен: 967 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо
Источник

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта