0

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

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

我有一个来自这里的工作脚本（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/）是我想做的很好的例子，但是它的代码比我认为需要的要多得多。

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

4

4 回答 4

0

这是一个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/

于 2013-01-15T06:48:53.257 回答
0

这里可能有类似的问题：

jQuery 使用淡入淡出效果更改图像 src

基本上在悬停时你开始淡出

$('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/

于 2013-01-15T06:29:31.953 回答
0

你可以这样做：

有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 代码；

于 2013-06-14T22:29:17.560 回答
0

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

我们有两个图像 A 和 B。

  1. 使用 maxDimension(a, b) 作为画布的维度。
  2. 设置globalComposite为lighter
  3. set globalAlpha= 0.1（0.1 是一个步长值，您可以更改它，但范围是 [0, 1]
  4. 绘制图像
  5. 设置globalAlpha= 1 - 步骤
  6. 绘制图像 b

  7. 重复 3 到 6

    var i = 0.1;// 全局 alpha
    var runID; //间隔id

    函数fadeImage() { if (i > 1) { clearInterval(runID); 返回;
    } 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/

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

于 2013-01-15T07:57:06.627 回答