jQuery淡出當前圖像，然後淡入點擊的圖像

所以我的jQuery代碼淡出，並在點擊新的圖像。我需要的代碼是淡出當前顯示的圖像並淡入點擊的新圖像。這是我的第一篇文章，所以我很抱歉，如果我不能正確格式化。jQuery淡出當前圖像，然後淡入點擊的圖像

$(document).ready(function() { 
    // set up event handlers for links  
    $("#image_list a").click(function(evt) { 

     //image swap 
     var imageURL = $(this).attr("href"); 
     $("#image").attr("src", imageURL); 



     //image fade out and in with callback function. 
     $("#image").fadeOut(1000, function(){ 
      $(this).fadeOut(1000).fadeIn(1000); 
      $("#caption").fadeIn(1000); 
     }); 

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


     //caption fade out and in 
     $("#caption").fadeOut(1000); 



     // cancel the default action of the link 
     evt.preventDefault(); 
    }); // end click 


    // move focus to first thumbnail 
    $("li:first-child a").focus(); 
}); // end ready

Here is my html 
<body> 
    <main> 
     <h1>Ram Tap Combined Test</h1> 
     <ul id="image_list"> 
      <li><a href="images/h1.jpg" title="James Allison: 1-1"> 
       <img src="thumbnails/t1.jpg" alt=""></a></li> 
      <li><a href="images/h2.jpg" title="James Allison: 1-2"> 
       <img src="thumbnails/t2.jpg" alt=""></a></li> 
      <li><a href="images/h3.jpg" title="James Allison: 1-3"> 
       <img src="thumbnails/t3.jpg" alt=""></a></li> 
      <li><a href="images/h4.jpg" title="James Allison: 1-4"> 
       <img src="thumbnails/t4.jpg" alt=""></a></li> 
      <li><a href="images/h5.jpg" title="James Allison: 1-5"> 
       <img src="thumbnails/t5.jpg" alt=""></a></li> 
      <li><a href="images/h6.jpg" title="James Allison: 1-6"> 
       <img src="thumbnails/t6.jpg" alt=""></a></li> 
     </ul> 
     <h2 id="caption">James Allison: 1-1</h2>    
     <p><img src="images/h1.jpg" alt="" id="image"></p> 
    </main> 
</body> 
</html>

來源

2017-10-12 Justin Allara

未來，請務必指定完整的問題/問題。如果您可以簡明扼要地表明您瞭解問題，還可以讓人們跳入併爲您提供所需的答案。 –

沒有看到你的HTML這是很難給出一個明確的答案，但我相信你要完成 - 隱藏點擊圖像，並顯示下一個圖像 - 你」我希望沿着這些路線的東西

//Listen for click on ANY image 
$('.images).click(function(e){ 
    //Fade out the image 
    $('.image-to-fade-out').fadeOut(); 

    //Fade in the clicked image 
    $(this).fadeIn(); 
})

來源

2017-10-12 03:33:06

謝謝我添加了我的html，如果這是有幫助的 –

jQuery淡出當前圖像，然後淡入點擊的圖像

回答

相關問題