Плавный переход картинки в другую картинку

Материал из JQuery

Перейти к: навигация, поиск

Элемент div с идентификатором #kitten должен иметь точно такой же размер, который имеет изображение, вставленное внутрь него. Кроме этого, этот же div должен иметь фоновое изображение.

<div id="kitten">
    <img src="/images/kitten.jpg" alt="Kitten" />
</div>

При наведении указателя мыши на элемент div с идентификатором #kitten, с помощью метода find() будет найдено изображение, находящееся внутри него. К этому изображению будет применен метод fadeOut() - картинка будет скрыта и "проявится" фоновое изображение. При выходе указателя мыши за пределы элемента div, к той же самой картинке будет применен метод fadeIn() - и основная картинка снова появится.

$("#kitten").hover(function(){
    $(this).find("img").fadeOut();
}, function() {
    $(this).find("img").fadeIn();
});

Используемые методы jQuery