Question

我无法获得fadeIn效果来处理图片的点击事件。

我希望它们在点击时淡入淡出... fadeOut和fadeToggle工作，但fadeIn不会。我搜索并尝试了所有找不到的东西。

我确信这个超级简单的东西，我正在俯瞰，但根本无法解决这个问题！

提前感谢您的帮助。

$(document).ready(function() {
    // preload images
    $("#image_list a").each(function() {
        var swappedImage = new Image();
        swappedImage.src = $(this).attr("href");
    });
    // set up event handlers for links    
    $("#image_list a").click(function(evt) {
        var imageURL = $(this).attr("href");
        $("#image").attr("src", imageURL).fadeIn(1000);

        var caption = $(this).attr("title");
        $("#caption").text(caption);

        // cancel the default action of the link
        evt.preventDefault();
    }); // end click
    // move focus to first thumbnail
    $("li:first-child a").focus();
}); // end ready

Answer 1

您必须先将预先加载的图像放入目标元素并隐藏它。那你可以褪色。

$(document).ready(function() {
  // preload images
  $("#image_list a").each(function() {
    var swappedImage = new Image();
    swappedImage.src = $(this).attr("href");
    $(this).append(swappedImage);
    $(swappedImage).hide();
  });
  // set up event handlers for links    
  $("#image_list a").click(function(evt) {

    // cancel the default action of the link
    evt.preventDefault();
    $("img").fadeIn(5000);

    var caption = $(this).attr("title");
    $("#caption").text(caption);
  }); // end click
  // move focus to first thumbnail
  $("li:first-child a").focus();
}); // end ready

fade对单击事件的效果

1 个答案: