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 - 然后，从空白处出现新的空间。

所以我想改进剧本以获得真正的'淡入'效果。

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

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

非常感谢有人可以指出最终的额外解决方案。

扬

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

Answer 1

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

可能会有更多运气

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

虽然你仍然会在第二张图片的加载时间内随心所欲，除非它被预先加载到某处。

Answer 2

最近我发现了一个支持CSS的解决方案：绝对将图像“放在”另一个上面，在文档准备好的情况下使用jQuery将其淡化为0，并在mouseout上将鼠标悬停时淡入淡出或淡出为0。

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");
    }
});

jQuery：悬停时的交叉淡化图像

3 个答案: