使用jQuery实现图片悬停切换及淡入淡出动画的问题

嘿，我知道你为啥用fadeToggle()没达到预期效果啦——直接修改<img>的src属性是瞬间完成的替换操作，元素本身并没有经历隐藏/显示的过程，所以fadeToggle()根本没发挥作用的空间～

下面给你两个靠谱的解决方案，你可以根据需求选择：

方案一：用CSS实现（更高效，推荐） #

这个方法不需要复杂的JS，靠CSS的transition和叠加的图片就能实现平滑过渡，性能更优：

修改后的HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="logo_container">
  <!-- 底层放彩色图，上层放默认灰度图 -->
  <img src="https://ironhorseclub.wpengine.com/wp-content/uploads/2018/05/logo2-sm-color.png" alt="Wordpress Install" class="logo logo-color">
  <img src="https://ironhorseclub.wpengine.com/wp-content/uploads/2018/05/logo2-sm.png" alt="Wordpress Install" class="logo logo-default">
</div>

对应的CSS #

.logo_container {
  position: relative;
  /* 尺寸设置成和你的图片一致 */
  width: 200px;
  height: auto;
}

.logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* 这里设置过渡动画的时长和曲线，可按需调整 */
  transition: opacity 0.3s ease;
}

.logo-default {
  z-index: 1; /* 默认让灰度图显示在最上层 */
}

/* 鼠标悬停时，让灰度图透明，露出底层的彩色图 */
.logo_container:hover .logo-default {
  opacity: 0;
}

方案二：用jQuery修改现有代码实现 #

如果更倾向用JS控制逻辑，可以通过「淡出→替换图片→淡入」的流程实现动画：

修改后的JS代码 #

$(document).ready(function(){ 
  $(".logo_container").mouseenter(function(){ 
    $("#logo").fadeOut(300, function(){
      // 淡出完成后再替换图片地址，避免闪烁
      $(this).attr('src', function(index, attr){ 
        return attr.replace(".png", "-color.png"); 
      }).fadeIn(300); // 淡入新图片
    });
  }); 

  $(".logo_container").mouseleave(function(){ 
    $("#logo").fadeOut(300, function(){
      $(this).attr('src', function(index, attr){ 
        return attr.replace("-color.png",".png"); 
      }).fadeIn(300);
    });
  }); 
});

说明 #

• 括号里的300是动画时长（单位毫秒），你可以根据需求调整快慢
• 用fadeOut()的回调函数确保图片地址在淡出完成后才替换，避免出现瞬间切换的闪烁问题

内容的提问来源于stack exchange，提问作者Trisha