Как наложить мышью на другое изображение?

Question

У меня есть два изображения.Я хотел бы настроить их так, чтобы при наведении указателя мыши на изображение по умолчанию оно постепенно исчезало во втором изображении.Как можно это сделать?

Спасибо!

Answer 1

Я предположил, что вы хотите постепенно исчезнуть при наведении мышки, вот с чего начать.

// markup
<div id="imgs">
    <img src="..." id="i1">  <!-- this is the mouseover image -->
    <img src="..." id="i2">  <!-- this is the default image -->
</div>


// css
img {
    display:block;
    position:absolute;
    top: 0;
    left: 0;
 }


// jQuery
$(function() {
    $('#imgs')
    .mouseenter(function() {
        $('#i2').fadeOut('slow');
    })
    .mouseleave(function() {
        $('#i2').fadeIn('slow');
    });  
});

Answer 2

Примерно так должно работать:

$('#first_image').mouseover( function() { 
    $(this).fadeOut('fast', function() {
        $('#new_image').fadeIn('slow');
    }
}

Это просто затухает при наведении мыши на старое изображение, а после завершения затухания новое изображение исчезает.

Answer 3

Вы можете использовать эффект JQuery .animate .Следующий урок помог мне узнать, как его использовать, и показывает именно то, что вы ищете.Изображение, которое появляется при наведении мыши, а затем при наведении мыши.http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/