LittleFatNinja
@LittleFatNinja
горе девелопер, любитель лютой садомии

Как правильно реализовать плавную подсветку на jQuery?

есть css класс
.highlighted {
   background-color: rgb(0,0,0);
}


как "плавно" добавить этот класс к кнопке?
или как вообще адекватно реализовать плавную подсветку кнопки?

менять цвет вот так, негодится, при быстрых наведениях, кнопка начинает "мигать", столько раз сколько мы на нее нааводили. попробуйте jsfiddle
$(".topMenu").on("mouseenter", "a", function() {
		$(this).animate({
			"background-color": "rgb(0,0,0)"
		});
	});
$(".topMenu").on("mouseleave", "a", function() {
		$(this).animate({
			"background-color": "rgb(200,200,200)"
		});
	});
  • Вопрос задан
  • 1441 просмотр
Решения вопроса 2
SagePtr
@SagePtr
Еда - это святое
Через CSS-свойство transition: jsfiddle.net/6Lxz9cb5/1
Ответ написан
kn1ght_t
@kn1ght_t
зачем здесь jquery? чем Вам hover не угодил?
jsfiddle.net/6Lxz9cb5/2
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
YuriMolotov
@YuriMolotov
Дизайн и вёрстка сайтов — Molotov.pro
1. Создай в стилях класс
.slow{-webkit-transition: all 1s ease;-moz-transition: all 1s ease;
-o-transition: all 1s ease;transition: all 1s ease;}
.slow:hover{-webkit-transition: all 1s ease;-moz-transition: all 1s ease;
-o-transition: all 1s ease;transition: all 1s ease;}

2. Задавай этот класс всему, что должно плавно анимироваться, например:
<div class="highlighted slow"></div>

3. Задай анимацию. Хоть jquery, хоть css. Например css при наведении:
.highlighted:hover{background:red;}

Анимация в любом случае будет длиться 1 секунду, с эффектом ease.

Реализация и с hover и с jquery, и с разными скоростями — molotov.pro
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы