Добавить эффект затухания jquery в конкретный скрипт img hover

Question

Это может быть просто, но я не могу найти решение. Возможно ли (простым способом!) Добавить jquery fadeIn и fadeOut эффект к этому сценарию при наведении изображения?

$('img[data-hover]').hover(function() {
    $(this)
        .attr('tmp', $(this).attr('src'))
        .attr('src', $(this).attr('data-hover'))
        .attr('data-hover', $(this).attr('tmp'))
        .removeAttr('tmp');
}).each(function() {
    $('<img />').attr('src', $(this).attr('data-hover'));
});


<img src="image1.jpg" data-hover="image2.jpg">

Answer 1

Возможно, вы захотите взглянуть на это:

http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/

Я думаю, это то, что вы хотите?

$("img.a").hover(
    function() {
      $(this).stop().animate({"opacity": "0"}, "slow");
    },
    function() {
      $(this).stop().animate({"opacity": "1"}, "slow");
    });
});

HTML:

<img src="image1.jpg" alt="" class="a" />
<img src="image2.jpg" alt="" class="b" />

Answer 2

Установить img отметьте желаемую начальную прозрачность с помощью CSS и добавьте это в свой код:

$('img[data-hover]').mouseover(function() {
    $(this).fadeTo("slow", 1);
}

$('img[data-hover]').mouseout(function () {
    $(this).fadeTo("slow", 0.25); // where 0.25 is the desired starting opacity
}

Посмотрите на документацию API .fadeTo(), так как вы, вероятно, захотите изменить это.