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

Question

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

<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-然后，从空白空间中出现了新图像。

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

我现在一直在探索两个很棒的资源：

• 循环插件 - 非常酷（我会尝试在悬停时获得循环效果）
• 设计师的 JQuery 很酷，但是我在使用 IE 时遇到了很多问题（淡入时有一个奇怪的黑色像素化边框）。

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

扬

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

Answer 1

最近我发现了一个以 CSS 为中心的解决方案：将一个图像绝对定位在另一个图像“上方”，在文档准备好时使用 jQuery 将其淡入到 0，并在鼠标悬停时淡入完全/在鼠标移开时再次淡入 0。

Answer 2

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

可能会有更多的运气

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

尽管您仍然会随心所欲地决定第二张图像的加载时间，除非它已在某处预加载。

Answer 3

这是一种冗长的修复，但这是我为了获得平滑的淡入淡出而所做的。我使用 Fadeout，然后作为回调，使用 $.ajax 实际加载新图像，然后使用成功：将其添加到 div（或 img）的功能，然后使用完整的：功能使其淡入。这会导致平滑的淡出-新内容-淡入操作。

下面是加载php文件的例子，原理与图片相同：

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