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

【问题标题】：How Do I, On Hover, Fade From One Image To Another我如何在悬停时从一个图像淡入另一个图像
【发布时间】：2012-12-29 05:22:26
【问题描述】：

基本上，下面的 jQuery 代码代码允许我在悬停时将一个图像交换到另一个图像，但我希望它从第一个图像淡化到另一个图像，并且我不知道如何让它工作（我已经搜索过一些答案，我也尝试过自己做）。

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

我有一个来自here (http://www.selfcontained.us/2008/03/08/simple-jquery-image-rollover-script/) 的工作脚本，我只想要淡入淡出效果，我'我自己也试过弄乱它，但 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/) 是我所期待的很好的例子做，但它比我认为需要的代码要多得多。

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

【问题讨论】：

与褪色无关，但我认为局部变量比元素上的“tmp”属性更容易使用。
fadein 用你的代码淡化什么你能更具体一点吗？
这个想法是从一个图像淡入到另一个图像，现在它只是交换图像，也许在这种情况下淡化不是正确的词，但这是我认为描述的唯一方式我想想象什么，哈哈……你知道我该如何改进吗？

标签： javascript jquery image html fadein

【解决方案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/

【讨论】：

我觉得这个想法正在实现，但代码根本没有改变图像，所以我不确定我是否遗漏了什么......我确实明白了这个想法，我读到你需要先淡出，然后才能淡入（Y）
这很奇怪，该代码在 jsfiddle 中有效，但在 Adobe Dreamweaver 中无效......我在上面的问题中使用的代码在 Dreamweaver 中运行良好......同样使用您提供的代码，我真的不希望它先淡出，我只是希望它从一个图像淡入另一个图像，尽管我们越来越近了，但谢谢哈哈

【解决方案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");
  }
);

演示：http://jsfiddle.net/ipsjolly/R6FnC/

【讨论】：

目前我们的两个脚本几乎都在做同样的事情。

【解决方案3】：

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

我们有两个图像 A 和 B。

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

var i = 0.1;// 全局 alpha
变量运行ID； // 间隔id

函数 fadeImage() { 如果 (i > 1) { 清除间隔（运行 ID）；返回;
} ctx.globalAlpha = i;
ctx.drawImage(imageA, 宽度, 高度);
ctx.globalAlpha = 1 - i;
ctx.drawImage(imageB, 宽度, 高度);
我 += 0.1;
}

函数运行（）{ ctx.save(); ctx.globalComposite = "打火机"; runID = setInterval(fadeImage, 500);
ctx.restore(); }

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

例如，我只是指定了画布的尺寸，并没有调整两个图像的宽度，使用相同宽度的图像应该更好。

【讨论】：

这就是我正在寻找的东西，但不完全在那里。

【解决方案4】：

你可以这样做：

有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').each(); 将其替换为我上面写的 html 代码；

【讨论】：