淡入淡出效果

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