求助：为jQuery切换DIV的脚本添加淡入淡出过渡效果失败

嘿，别着急，我来帮你搞定这个淡入淡出的效果！你的代码思路没问题，但有两个小细节导致过渡没生效，我给你修正一下，再把原因讲明白：

原代码的问题点： #

• $('.targetDiv').hide().fadeOut(1000);：hide()会立刻把元素设为display: none，后面的fadeOut动画根本没机会运行——元素都已经藏起来了，还怎么淡出？
• $('#div' + $(this).attr('target')).show();：show()是瞬间显示元素，没有任何过渡效果，自然看不到淡入。

修正后的代码 #

jQuery(document).ready(function( $ ) {
    // 页面加载时默认隐藏div2和div3
    $('#div2, #div3').hide();
    
    $('.show').click(function () {
        // 先拿到当前按钮要切换到的目标DIV
        var targetId = '#div' + $(this).attr('target');
        
        // 先让所有目标DIV淡出（1秒完成），淡出结束后再淡入目标DIV
        $('.targetDiv').fadeOut(1000, function() {
            $(targetId).fadeIn(1000);
        });
    });
});

关键修改说明： #

• 去掉了多余的hide()，直接用fadeOut(1000)让所有目标DIV平滑淡出，动画时长1秒（你可以根据需求调整这个数字，比如500就是半秒）。
• 把show()换成了fadeIn(1000)，这样目标DIV会平滑淡入，和淡出时长保持一致，过渡更协调。
• 加入了回调函数：fadeOut的第二个参数是动画完成后才会执行的函数，确保所有DIV都淡出后再显示目标DIV，不会出现两个DIV同时显示的混乱情况。

这样修改后，点击按钮就能看到流畅的淡入淡出切换效果啦！

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