Question

我正在尝试为一个有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/
任何帮助将不胜感激！

Answer 1

你需要写

$('#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/

Answer 2

您的网页上有重复的ID，这是无效的HTML：

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

我猜jQuery要么无法运行，要么只运行它找到的匹配id的第一个元素。尝试更改id，以便它们是唯一的，它可以让你更近。

jQuery淡出淡出div，点击超过2个div

2 个答案: