Question

想知道是否有可能：

在鼠标悬停时淡出图片，然后在第一次淡出后淡入不同的图片。

通过以下方式轻松淡出：

   .overlay {
   position: absolute; width: 269px;  height: 344px;   bottom:0;
   left: 6%;   z-index: 2;   transition: opacity 1.5s ease;  opacity:1;
   }

  .overlay:hover {  opacity:0;  }

图片尺寸不同。

Answer 1

这应该可以，并且允许你在jquery

中完全完成

$( ".overlay" ).hover(function() {
  $( this ).fadeTo( "slow" , 0, function() {
    $( this ).attr("src", newIMGURL);
        $( this ).fadeTo( "slow" , 1);
  });
});

另一个答案的问题是它会在img仍然褪色的情况下改变它，这看起来并不令人愉快，我的等待直到图像完全消失以切换图像，然后淡入。

Answer 2

$('.overlay').hover(function() {
$(this).fadeOut();
$(this).attr('src', 'newImage.png');
}

Answer 3

编辑使用纯jQuery方法。

$(document).ready(function() {
    var changed = false;
    $( ".overlay" ).mouseover(function() {
        if(!changed) {
            $(this).fadeTo("slow", 0, function() {
                $(this).children('img').attr("src", "newjpg.jpg");
                $(this).fadeTo("slow", 1);
            });
            changed = true;
        }
    });
});

jsFiddle：http://jsfiddle.net/8pFBB/

编辑：能够恢复旧图像＆amp;排队以防止动画在将鼠标重复移动并远离物体时无限堆叠

$(document).ready(function() {
    $(".overlay").queue("fadeFx");
    var fading = false;
    $(".overlay").mouseover(function() {
        if(fading) { $(".overlay").dequeue(); }
        fading = true;
        $(this).fadeTo( "slow" , 0, function() {
            $(this).children('img').attr("src", "http://placehold.it/350x150");
            $(this).fadeTo( "slow" , 1);
            fading = false;
        });
    });
    $(".overlay").mouseout(function() {
        if(fading) { $(".overlay").dequeue(); }
        fading = true;
        $(this).fadeTo( "slow" , 0, function() {
            $(this).children('img').attr("src", "http://placehold.it/150x350");
            $(this).fadeTo( "slow" , 1);
            fading = false;
        });
    });
});

http://jsfiddle.net/8uVHF/

在鼠标悬停时淡出图片然后淡入不同的图片

3 个答案: