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); 
    }); 
});