Переход непрозрачности CSS при нажатии ⇐ Html

[Anonymous]

Можно ли как-нибудь заставить это изображение исчезнуть, используя определенный переход CSS? Прямо сейчас он просто появляется до полной непрозрачности.

Код: Выделить всё

var makeImage = function() {
$('#image').remove();

$(document.body).append('
[img]http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Scitech/660/371/tardar-sauce-the-cat.jpg?ve=1[/img]
');

var img = $('#image')[0];
console.log(img.style);
img.style["opacity"] = 1;
};

Код: Выделить всё

.fadeIn {
opacity: 0;
-moz-transition: opacity 5.5s ease 0.300s;
-webkit-transition: opacity 5.5s ease 0.300s;
-o-transition: opacity 5.5s ease 0.300s;
transition: opacity 5.5s ease 0.300s;
}

Код: Выделить всё

Fade Example

редактировать: я понимаю, что есть функция FadeIn, предоставляемая jquery. Я сожалею об использовании jquery в этом примере, так как смысл заключался в том, чтобы сделать это с использованием свойств перехода CSS.

Подробнее здесь: https://stackoverflow.com/questions/172 ... n-on-click