图片点击淡出不会加载下一张图片

我正试图编写一个回调函数，淡入淡出旧图片后的下一张图片。但是，我似乎可以淡化图像，但我只淡化旧图像而不是新图像。我认为第一个$（“＃image”）会是旧的，但我不知道为什么在重置它的属性后它仍然是旧图像。标题也会出现同样的情况。图片点击淡出不会加载下一张图片

这是我的.js

$(document).ready(function() { 
    // set up event handlers for links  
    $("#image_list a").click(function(evt) { 
     $("#image").fadeOut(1000, 
     function(){ 
      var imageURL = $(this).attr("href"); 
      $("#image").attr("src", imageURL).fadeIn(1000); 
     }); 
     $("#caption").fadeOut(1000, 
     function(){ 
      var caption = $(this).attr("title"); 
      $("#caption").text(caption).fadeIn(1000); 
     }); 

     //var imageURL = $(this).attr("href"); 
     //$("#image").attr("src", imageURL); 
     //$("#image").fadeIn(1000); 
     //var caption = $(this).attr("title"); 

     //$("#caption").text(caption); 
     //$("#caption").fadeIn(1000); 
     // cancel the default action of the link 
     evt.preventDefault(); 
    }); // end click 

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

这是我的.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 Z.Chen

这是一个与this发生问题，请that如更换this

$("#image_list a").click(function(evt) { 
    // Here this is element of #image_list a 
    var that = this; 
    $("#image").fadeOut(1000, function(){ 
     // Here this is element of #image 
     var imageURL = $(that).attr("href"); 
     $("#image").attr("src", imageURL).fadeIn(1000); 
    }); 
    $("#caption").fadeOut(1000, function(){ 
     // Here this is element of #image 
     var caption = $(that).attr("title"); 
     $("#caption").text(caption).fadeIn(1000); 
    }); 

    //var imageURL = $(this).attr("href"); 
    //$("#image").attr("src", imageURL); 
    //$("#image").fadeIn(1000); 
    //var caption = $(this).attr("title"); 

    //$("#caption").text(caption); 
    //$("#caption").fadeIn(1000); 
    // cancel the default action of the link 
    evt.preventDefault(); 
}); // end click

来源

2017-10-12 02:32:47 leaf

它的作品！谢谢你的帮助。 –

很高兴它可以帮助。 – leaf

图片点击淡出不会加载下一张图片

回答

相关问题