對單擊事件的fadeIn效果

Question

我無法獲得fadeIn效果來處理圖像的click事件。

我希望它們在單擊時淡入... 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