jquery fadeIn和fadeOut不工作

Question

所以我有3張圖片，當用戶點擊它時，它會變成另一張圖片。但我想添加一個jQuery fadeOut和fadeIn以給出切換過程的轉換效果。這是我想出來的，但它不起作用，有什麼想法？

$(".chosen").click(function() {  
    var src = $(this).attr("src");  
    if (src == "blank.png") (function() { 
     $(this).fadeOut(400); 
     { 
      $(this).attr("src", "ex.png").fadeIn(400);  
     } 
    }); 

    else if (src == "ex.png") (function() { 
     $(this).fadeOut(400); 
     { 
      $(this).attr("src", "oh.png").fadeIn(400);   
     } 
    }); 

    else (function() { 
     { 
      $(this).fadeOut(400); 
      $(this).attr("src", "blank.png").fadeIn(400);  
     } 
    }); 
}); 

Answer 1

您應該改變形象，轉型的源回到fadeOut動畫完成後。

fadeOut文檔顯示動畫完成渲染時的回調參數complete。

$(this).fadeOut(400, function(){/*code to be executed when animation finishes*/}); 

在您的例子，你可以這樣做：

$(this).fadeOut(400, function(){ 
    $(this).attr("src", "ex.png").fadeIn(400); 
}); 

你可以重構你的代碼，以減少像這樣冗餘代碼：

$(".chosen").click(function() {  
    var $this = $(this); // avoid calling $ multiple times 

    $this.fadeOut(400, function() { 
     var src = $this.attr("src");  
     var newSrc = ""; 

     // this if/else block could be refactored further 
     if (src == "blank.png") { 
      newSrc = "ex.png"; 
     } 
     else if (src == "ex.png") { 
      newSrc = "oh.png"; 
     } 
     else { // if src == "oh.png" 
      newSrc = "blank.png"; 
     } 

     $this.attr("src", newSrc).fadeIn(400); 
    }); 
});