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淡出当前图像，然后淡入点击的图像

回答

相关问题