2

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

<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 for Designers很酷，但是我在 IE 上遇到了很多问题（fadeIn 上有一个奇怪的黑色像素化边框）。

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

简

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

4

3 回答 3

3

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

可能会有更多的运气

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

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

于 2009-05-06T18:53:10.237 回答
3

最近我找到了一个以 CSS 为重点的解决方案：绝对将图像“放在”另一个图像上，在 Document 就绪时使用 jQuery 将其淡化为 0，并在鼠标悬停时淡入到完全/在 mouseout 时再次淡入到 0。

于 2009-12-01T13:13:03.850 回答
1

这是一种冗长的修复，但这是我为获得平滑渐变所做的。我使用 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");
    }
});
于 2009-05-06T18:58:08.743 回答