jQuery：悬停时交叉淡入淡出图像答案

【问题标题】：jQuery : crossfading image on hoverjQuery：悬停时交叉淡入淡出图像
【发布时间】：2010-10-24 06:43:20
【问题描述】：

我正在尝试实现一个会影响两个图像的“淡入”脚本：

<script type="text/javascript">

  $(document).ready(function(){

        $('img').mouseover( function() {

              $(this).fadeOut(200, function() {

                    $(this).attr({'src':'http://example/images/image.png'});

               if (this.complete) $(this).fadeIn(500);

              });
        });

  });

</script>

这段 jQuery 给了我以下信息：

1 - 首先图像淡出并消失 2 - 然后，从空白处出现新的。

所以我想改进脚本以获得真正的“淡入”效果。

到目前为止，我一直在探索两个很棒的资源：

Cycle Plugin - 非常酷（我会尝试在悬停时获得循环效果）
JQuery for Designerscool ，但是我在 IE 上遇到了一堆问题（fadeIn 上有一个奇怪的黑色像素化边框）。

如果有人能指出最终的额外解决方案，非常感谢。

一月

编辑：这里是 CSS 技巧/解决方案http://paragraphe.org/stackoverflowdemos/crossfade-images/

【问题讨论】：

标签： jquery image fade

【解决方案1】：

最近我发现了一个以 CSS 为中心的解决方案：绝对将图像“置于”另一个图像之上，在 Document 就绪时使用 jQuery 将其淡化为 0，在鼠标悬停时淡入为完全/在 mouseout 时再次淡入为 0。

【讨论】：

【解决方案2】：

这是一种冗长的修复，但我这样做是为了获得平滑的淡入淡出。我使用 Fadeout，然后作为回调，我使用 $.ajax 实际加载新图像，然后使用 success: 函数将其添加到 div（或 img），然后使用 complete: 函数将其淡化in. 这会导致平滑的淡出-新内容-淡入动作。

这里是一个加载php文件的例子，原理和图片一样：

$("#leftbar").fadeOut("normal", function() {
$.ajax({
    url: "bin/leftBar.php",
    cache: "false",
    success: function(data) {
        $("#leftbar").html(data);
    },
    complete: function() {
        $("#leftbar").fadeIn("normal");
    }
});

【讨论】：

嘿瑞恩，很酷的焦点，我将在接下来的几天里玩它。我想我可以跳过“缓存”部分，对吧？还有 .html(data) ?
您可以跳过缓存：“false”，但 IE 会缓存您的图像，如果它们在服务器端发生更改，它会加载旧图像。 .html(data) 将被替换为 .attr({src: "/imageURL"});以及某种图像加载器，例如： var img = new IMAGE; img.src = /imageURL;
（基本上我的意思是我会使用 $.ajax 函数加载图像，然后使用 .html() 函数将其放置到位。：D

【解决方案3】：

您调用第二个淡入淡出的方式，因为对原始淡入淡出的回调将保证它们一个接一个地执行。

可能会有更多的运气

$('img').mouseover( function() {
          $(this).fadeOut(200);
          $(this).attr({'src':'http://example/images/image.png'});
          if (this.complete) $(this).fadeIn(500);
        });

尽管您仍然会随心所欲地考虑第二张图片的加载时间，除非它被预加载到某个地方。

【讨论】：