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 に答える