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已关闭），它展示了您想要做的事情。这是一个没有容器div的 JSBin 示例，您可以看到不正在工作。

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

我也改变了订单。所以首先下载图像，只有当它可用时它才会淡入。

Answer 2

让它工作，使用以下任何其他人想知道的事情：

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

为什么.fadeIn（'慢'）不能在这里工作？

2 个答案: