Question

基本上，下面的jQuery代码允许我在悬停时将一个图像交换到另一个图像，但是我希望它从第一个图像淡化到另一个图像并且我没有知识可以使其工作（我已经搜索过了）对于一些答案，我也尝试过这样做。）

这个问题的问题在于，似乎有很多人都在问这个问题，但在我发现的少数问题中，可能会有一些有用的答案（就我至少要做的事情而言），他们仍然不是我想要的。

我有一个来自here的工作脚本（http://www.selfcontained.us/2008/03/08/simple-jquery-image-rollover-script/），我只想要fadein效果，我自己试图搞乱它，但jQuery仍然是我的弱点，哈哈，

    <script type="text/javascript">
    $(function() {
    $('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'));
    });;
    });
    </script>

    <img src="../logo/Untitled-31.fw.png" data-hover="../logo/Untitled-31.png" />

这里（http://jqueryfordesigners.com/image-cross-fade-transition/）和这里（http://jqueryfordesigners.com/image-fade-revisited/）是我正在寻找的很好的例子做，但它的代码比我想象的要多得多。

欢迎任何和所有想法！此外，如果任何人有任何更容易的路线，我不会介意哈哈。谢谢！

Answer 1

这里可能是一个类似的问题：

jQuery Change Image src with Fade Effect

基本上在悬停时你开始逐渐消失

$('img[data-hover]').hover(function() {
var $image=$(this);
$(this)
.attr('tmp', $(this).attr('src'))
.attr('src', $(this).attr('data-hover'))
.attr('data-hover', $(this).attr('tmp'))
.removeAttr('tmp');

$image.fadeOut(400, function() {
        $image.attr('src',$image.attr('data-hover'));
    }).fadeIn(400);

});

使用回调事件，并使用fadeIn链接它。在回调事件中，您可以更改图像源。

我粘贴的源代码仅供参考，可能与您的预期不完全相同，但您会明白这一点。

这是一个有效的例子： http://jsfiddle.net/GxBWt/

Answer 2

这是一个jQuery代码

$("img").mouseenter(
  function () {
     $("img").attr("src","http://rhceblog.com/wp-content/uploads/2012/11/Yahoo_3.jpg");
  }
);
$("img").mouseleave(
  function () {
     $("img").attr("src","https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTt__9kJSk-ESPLpb_zfQ7SQm7Z_w_m32fyiD07hnTAU7zvFWx_dQ");
  }
);

DEMO ：http://jsfiddle.net/ipsjolly/R6FnC/

Answer 3

如果你真的想要那种效果，可以使用画布。

我们有两张图片A和B.

使用maxDimension（a，b）作为画布＆＃39;尺寸。
将globalComposite设为lighter
设置globalAlpha = 0.1（0.1是您可以更改它的步长值，但范围是[0,1]
画图像
设置globalAlpha = 1 - 步
画图b
重复3到6

var i = 0.1; //全局alpha
var runID; // interval id

function fadeImage（）{   if（i> 1）{     clearInterval（的runid）;     返回;
  }   ctx.globalAlpha = i;
  ctx.drawImage（imageA，width，height）;
  ctx.globalAlpha = 1 - i;
  ctx.drawImage（imageB，width，height）;
  i + = 0.1;
}

function run（）{   ctx.save（）;   ctx.globalComposite =＆＃34;打火机＆＃34 ;;   runID = setInterval（fadeImage，500）;
  ctx.restore（）; }

示例：http://jsfiddle.net/xFryE/1/

在示例中，我只是指定了画布＆＃39;维度而不是调整两个图像的宽度，使用相同宽度的图像应该更好。

Answer 4

你可以像这样做somthin：

有html代码：

<div class="img" style="position:relative; z-index:1;">
  <div class="hover" style="position:absolute; z-index:3; top:0; left:0; display:none;"><img src="image-hover.png" /></div>
  <div style="position:absolute; z-index:2; top:0; left:0"><img src="image.png"></div>
</div>

有jquery：

$('.img').hover(
   function(){
     $(this).find('.hover').fadeIn();
},
   function(){
     $(this).find('.hover').fadeOut();
}
);

如果您想要图像：

<img src="../logo/Untitled-31.fw.png" data-hover="../logo/Untitled-31.png" />

您可以使用jquery $（'img'）将每个（）;

替换为html代码。

我如何在悬停时从一个图像淡入另一个图像

4 个答案: