2

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

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

谁能看到这里有什么问题？

谢谢

4

2 回答 2

2

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

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

于 2012-07-16T10:30:51.553 回答
0

让它工作，使用以下内容以防其他人想知道：

$(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");
        });
    });
于 2012-07-16T10:55:46.830 回答