jQuery hover切换背景图时如何添加FadeIn淡入过渡动画

CSS 原生不支持 background-image 属性的过渡动画，直接修改这个属性值只能触发瞬间切换，你之前给元素加FadeIn效果不生效，本质是因为FadeIn控制的是整个元素的透明度，而你全程没有让元素本身做显隐切换，只是替换了它的背景属性，自然不会有淡入效果。

不要直接修改单元素的background-image属性，用叠层交叉淡入的思路实现，前景内容不会跟着动画变化，只有背景做平滑过渡，性能和效果都最优。

方案1：最小改动兼容现有jQuery逻辑 #

第一步：补充CSS样式 #

给两个背景容器加定位和双层背景结构的基础样式：

#menu-photo-small, .menu-photo {
  position: relative;
  /* 宽高保持你原有设置即可，不用修改 */
  overflow: hidden;
}
/* 背景层通用样式，绝对定位铺满容器 */
.menu-bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 0.3s ease; /* 调整数值可改动画速度和缓动效果 */
}
/* 底层固定放默认背景 */
.menu-bg-layer.base {
  z-index: 1;
  background-image: url(./photos/background.jpg);
}
/* 上层用来放hover切换的背景，默认全透明 */
.menu-bg-layer.hover {
  z-index: 2;
  opacity: 0;
}
/* 容器内的前景内容要设更高层级，避免被背景层盖住 */
.menu-content {
  position: relative;
  z-index: 3;
}

第二步：调整HTML结构 #

把原来两个容器内的业务内容放到.menu-content里，容器内插入两个背景层：

<div id="menu-photo-small">
  <div class="menu-bg-layer base"></div>
  <div class="menu-bg-layer hover"></div>
  <div class="menu-content">
    <!-- 原有内容放这里 -->
  </div>
</div>

<div class="menu-photo">
  <div class="menu-bg-layer base"></div>
  <div class="menu-bg-layer hover"></div>
  <div class="menu-content">
    <!-- 原有内容放这里 -->
  </div>
</div>

第三步：优化jQuery代码 #

把你原来重复写的4段hover逻辑合并，加上图片预加载和动画打断处理，避免快速划动时动画排队：

$(document).ready(function() {
  // 预加载所有hover背景图，避免第一次切换时加载卡顿
  const imgList = [
    './photos/menuhover/change1.jpg',
    './photos/menuhover/change2.jpg',
    './photos/menuhover/change3.jpg',
    './photos/menuhover/change4.jpg'
  ];
  imgList.forEach(src => new Image().src = src);

  // 统一绑定所有菜单项事件
  $('[id^="change"]').hover(function() {
    const idx = this.id.replace('change', '');
    const bgSrc = `./photos/menuhover/change${idx}.jpg`;
    $('#menu-photo-small .hover, .menu-photo .hover')
      .css('background-image', `url(${bgSrc})`)
      .stop().animate({opacity: 1}, 300);
  }, function() {
    $('#menu-photo-small .hover, .menu-photo .hover')
      .stop().animate({opacity: 0}, 300);
  });
});

方案2：纯CSS实现（无JS依赖） #

如果不想写JS逻辑，可以直接用CSS伪元素+hover选择器实现，性能更好：

#menu-photo-small, .menu-photo {
  position: relative;
  background: url(./photos/background.jpg) center/cover no-repeat;
}
/* 用伪元素当切换背景层 */
#menu-photo-small::before, .menu-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
/* 菜单项hover时对应背景淡入，注意这里要求#changeX和两个背景容器是同级DOM关系 */
#change1:hover ~ #menu-photo-small::before,
#change1:hover ~ .menu-photo::before {
  background-image: url(./photos/menuhover/change1.jpg);
  opacity: 1;
}
#change2:hover ~ #menu-photo-small::before,
#change2:hover ~ .menu-photo::before {
  background-image: url(./photos/menuhover/change2.jpg);
  opacity: 1;
}
#change3:hover ~ #menu-photo-small::before,
#change3:hover ~ .menu-photo::before {
  background-image: url(./photos/menuhover/change3.jpg);
  opacity: 1;
}
#change4:hover ~ #menu-photo-small::before,
#change4:hover ~ .menu-photo::before {
  background-image: url(./photos/menuhover/change4.jpg);
  opacity: 1;
}

• 动画时长建议控制在200-400ms区间，过短会显得生硬，过长会有拖沓感
• 必须提前预加载hover用的背景图，否则用户第一次触发hover时才加载图片，会出现空白、闪烁问题
• 动画前加.stop()是为了打断未完成的动画，避免鼠标快速划过多个菜单项时，动画排队导致的效果错乱
• 不要直接对整个背景容器做淡入淡出，否则容器内的文字、按钮等前景内容会跟着变透明，影响可读性

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