jquery - 为什么 .fadeIn ('slow' ) 在这里不起作用？

Question

我正在尝试制作一个带有按钮的简单画廊，允许用户循环浏览图像。当用户单击按钮并且图像发生变化时，我希望它淡入但它似乎没有执行任何操作？这是我所拥有的:

$(function () {
    $("#homeGalleryControls li a").click(function () {
          var image = $(this).attr("rel");
          $('#galleryImage').fadeIn('slow');
          $('#galleryImage').attr("src", image);
          $('.galleryButton').attr("src", "/Content/Images/Design/btn_default.gif");
          $(this).find('img').attr("src", "/Content/Images/Design/btn_checked.gif");
    });
});

谁能看出这里出了什么问题吗？

谢谢

Answer 1

问题是 fadeIn 和 fadeOut 不能直接作用于 img 元素，所以我添加了一个容器 div。 我创建了一个 JSBin (因为 JSFiddle 已关闭)演示了您想要执行的操作。 这是JSBin 没有容器 div 的示例，您可以看到它无法工作。

HTML

<div id="imageContainer">
  <img id="image" />
</div>

JavaScript 代码

$(document).ready(function () {
  var image$ = $("#image"),
      imageContainer$ = $("#imageContainer"),
      parent$ = imageContainer$.parent();

  imageContainer$.fadeOut(0, function () {
    imageContainer$.detach();

    image$.on("load", function () {
      imageContainer$.fadeIn(400);
    });

    image$.attr("src", "http://www.waleoyediran.com/wp-content/uploads/2011/04/stackoverflow.png");

    parent$.append(imageContainer$);
  });
});

我还改变了顺序。因此，首先下载图像，只有当图像可用时，它才会淡入。