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

Question

[LittleFatNinja]

есть 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)"
		});
	});

Answer 1

[SagePtr]

Через CSS-свойство transition: jsfiddle.net/6Lxz9cb5/1

Comments

[LittleFatNinja]

спасибо! не знал вот именно этот момент: all 1s ease

Answer 2

[kn1ght_t]

зачем здесь jquery? чем Вам hover не угодил?
jsfiddle.net/6Lxz9cb5/2

Comments

[LittleFatNinja]

а разве hover позволяет плавно это делать?

[kn1ght_t]

LittleFatNinja: читайте про css transition
p.s. отредактировал свой ответ, там есть пример на фидле

[LittleFatNinja]

kn1ght_t: вообще четко. думал на css так не сделать, буду знать

Answer 3

[Юрий Молотов]

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