WordPress菜单悬浮切换背景图如何添加jQuery淡入淡出过渡效果

问题根源 #

• 动画执行时序错误：fadeOut()是异步动画，原代码未等淡出完成就直接添加新类、执行淡入，两个动画叠加导致看不到过渡效果
• 类名清空错误：$("#bg").removeClass()会把#bg原本的content基础类也删掉，如果content配置了宽高、定位等基础样式，会直接导致元素布局错乱
• 索引匹配错位：jQuery的index()方法从0开始计数，而CSS的nth-child()选择器从1开始计数，会出现菜单和对应类匹配错误的问题

修复方案 #

1. 调整JS逻辑 #

把添加新类和淡入的逻辑放到fadeOut()的回调函数中，保证淡出完成后再切换类执行淡入，同时保留基础类：

var image=["proj1","proj2","proj3","proj4","proj5","proj6","proj7","proj8","proj9","proj10","proj11","proj13","proj14","proj15","proj16","proj17","proj18","proj19","proj20","proj21","proj22","proj23","proj24","proj25","proj26","proj27","proj28","proj29","proj30","proj31","proj32" ];

$(".list-group li").hover(function(){
  var value=  $(this).index();
  hoverContent(value);
});
function hoverContent(value){
    $("#list-content div").removeClass('show');
    // 索引+1匹配nth-child的计数规则
    $("#list-content div:nth-child("+(value+1)+")").addClass("show");
    // 仅移除项目类保留content基础类，淡出完成后执行后续操作
    $("#bg").removeClass(image.join(' ')).fadeOut(300, function(){
        $(this).addClass(image[value]).fadeIn(300);
    });
}

代码中的300为动画时长，单位毫秒，可根据需求自行调整

2. 补充基础CSS保证过渡生效 #

给#bg添加基础样式，避免切换类时出现布局跳动：

#bg {
  /* 按需配置宽高、定位参数，保证元素尺寸固定 */
  width: 100%;
  height: 400px;
  transition: all 0.3s ease;
  /* 背景图通用配置 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

可选优化（避免频繁悬浮触发动画错乱） #

添加防抖逻辑，避免快速悬浮多个菜单项时动画叠加：

var hoverTimer = null;
$(".list-group li").hover(function(){
  var value=  $(this).index();
  // 防抖：150ms内多次悬浮只执行最后一次
  clearTimeout(hoverTimer);
  hoverTimer = setTimeout(function(){
    hoverContent(value);
  }, 150);
});

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