如何使用FadeIn（）jQuery

Question

我正在制作导航栏，当用户点击菜单选项卡时，特定图像会更改它正常工作。但我希望图像在变化时为fadeIn（）。

我的jQuery

 $('#menu-cross').on('click',function(){
   var changeImage  = "images/navigation-icons/closemenu.png";
        $(this).attr('src', changeImage); 
 });

我正在尝试

 $('#menu-cross').on('click',function(){
    var changeImage  = "images/navigation-icons/closemenu.png";
    $('#menu-cross').fadeIn(500 , function(){
      $(this).attr('src', changeImage); 
    });
 });

我的Html

 <img src="images/navigation-icons/menu.png" id="menu-cross">

Answer 1

除非您需要在SomeMongoidObject.new.save 之前fadeOut并且更改fadein中的src，否则您正在做正确的事情，如下所示：

<强> DEMO

fadeOut

但我更喜欢 here

中的这种美容解决方案 blog

Answer 2

您的图像也会显示，因此淡出效果不会起作用。所以你可以隐藏它并再次显示

 $('#menu-cross').on('click',function(){
    var changeImage  = "images/navigation-icons/closemenu.png";
    $(this).attr('src', changeImage); 
    $('#menu-cross').fadeOut(0).fadeIn(500);
 });

Answer 3

尝试使用淡入淡出：

 $(this).attr('src', changeImage).fadeIn('slow');