jQuery 淡入淡出 div 点击超过 2 个 div答案

【问题标题】：jQuery fade in fade out div on click with more than 2 divsjQuery 淡入淡出 div 点击超过 2 个 div
【发布时间】：2014-03-27 04:41:03
【问题描述】：

我正在尝试为具有 3 个不同链接的网站创建一个 jQuery 淡入/淡出横幅。我已成功使用以下答案 Simple fade in fade out div with jquery on click 来获得 2 个链接，但我遇到了第三个问题。
这是 jQuery 代码：

$('#btn2').click(function (e) {
    $('#home_splash1').fadeOut('slow', function () {
        $('#home_splash2').fadeIn('slow');
    });
});

$('#btn1').click(function (e) {
    $('#home_splash2').fadeOut('slow', function () {
        $('#home_splash1').fadeIn('slow');
    });
});

$('#btn3').click(function (e) {
    $('#home_splash1').fadeOut('slow', function () {
        $('#home_splash3').fadeIn('slow');
    });
});

HTML/CSS 代码很长，所以我将发布到 jsfiddle 的链接，其中包含所有代码 http://jsfiddle.net/u2NGy/
任何帮助将不胜感激！

【问题讨论】：

到底是什么问题？
我希望链接淡出活动 div 并淡入每个链接对应的 div。它在#btn1 和#btn2 之间运行良好，但#btn3 仅从#btn1 开始工作，然后它将停止工作。我通过根据 Sneaky 的建议删除重复的 id 来解决它。另外，我也使用了 kamilkp 的修复程序。谢谢大家！这是更新的工作代码：jsfiddle.net/arZMC

标签： javascript jquery html css fade

【解决方案1】：

您的页面上有重复的 id，这不是有效的 HTML：

<a href="#" class="white" id="btn3">Trusted Quality</a>

我猜 jQuery 要么无法运行，要么只是在它找到的与 id 匹配的第一个元素上运行。尝试更改 id 以使它们是唯一的，它应该让你更接近。

【讨论】：

【解决方案2】：

你需要写

$('#btn2').click(function(e){    
    $('#home_splash1, #home_splash3').fadeOut('slow', function(){
        $('#home_splash2').fadeIn('slow');
    });
});

而不是

$('#btn2').click(function(e){    
    $('#home_splash1', '#home_splash3').fadeOut('slow', function(){
        $('#home_splash2').fadeIn('slow');
    });
});

你还有两个id="btn3" 的锚。我更新了你的小提琴，它现在可以工作了：http://jsfiddle.net/vD77F/31/

【讨论】：

感谢 kamilkp，这也有帮助。