Подія CSS hover скасовується, якщо я встановлюю непрозорість за допомогою javascript - javascript, jquery, css

Я намагаюся зробити зображення fadeIn ефект, я встановив метод анімації jQuery для реалізації ефекту затухання, і виявив, що подія наведення, яку я реєструю в CSS, скасовано.

Я думаю, що це дивно, але метод не повинен впливати на мій ефект наведення.

Хоча я можу перереєструвати подію наведення за допомогою JavaScript, але це робить інше завдання

Я щось не розумію?

P.S. Я намагаюся не використовувати анімацію CSS3.

Частина JS:

$("img").animate({
"opacity": "0.5"
}, 1500);

Частина CSS:

img {
opacity: 0;

}
img:hover {
opacity: 1;
}

http://jsfiddle.net/aSRMR/

Відповіді:

2 для відповіді № 1

Використовуйте !important в css, що вирішить проблему

img:hover {
opacity: 1 !important;
}

Робочий Скрипка

---

1 для відповіді № 2

Замість цього ви можете використовувати наведення.

$("img").hover( function (){
console.log("hovered in");
}, function (){
console.log("hovered out");
}

Не забувай ставити Стоп() перш ніж робити анімацію.

так що спробувати свій код буде виглядати так.

$("img").hover( function (){
console.log("hovered in");
$("img").stop().animate({"opacity": "1"}, 1500);
}, function (){
console.log("hovered out");

$("img").stop().animate({"opacity": "0.5"}, 1500);
}

---

Інше рішення, якщо ви хочете застосувати підхід CSS, зробіть це так.

$("img").hover( function (){
$("img").addClass("hovered");
}, function (){
$("img").removeClass("hovered");
}

на вашому CSS.

img {
opacity: 0;
}
.hovered {
opacity: 1;
}

Ви також розглядали можливість зникання за допомогою CSS Webkit?

---