圖片點擊淡出不會加載下一張圖片

我正試圖編寫一個回調函數，淡入淡出舊圖片後的下一張圖片。但是，我似乎可以淡化圖像，但我只淡化舊圖像而不是新圖像。我認爲第一個$（「＃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

圖片點擊淡出不會加載下一張圖片

回答

相關問題