Question

我知道对此的简单答案是执行以下操作：

$('#div > p').fadeIn()

虽然在我的具体情况下，这似乎不起作用。我在网页上使用了很多相同的ID，基本上我必须使用>两次，这似乎不起作用。

这是JSFiddle：http://jsfiddle.net/p4sA3/2/

基本上，我只希望#information div中的文本为fadeOut，并且淡化其他div-wrap中的新文本。

我将如何实现这一目标？

这是jQuery：

$('#goodbye-wrap').hide();

$('#change').click(function(){

    $('#hello-wrap').fadeOut(200, function(){
        $('#goodbye-wrap').fadeIn(600);
    });

});

Answer 1

正如我在评论中所说，你不应该为不同的元素使用相同的id。话虽如此，您总是可以使用.first()来过滤先前的选择

结帐：http://api.jquery.com/first/

另外，与.first()一样，您还有其他过滤条件，例如.last()或.eq()

编辑：我现在越来越接近你想要的东西了吗？ http://jsfiddle.net/p4sA3/3/

Answer 2

您不应该为多个元素使用相同的ID。它们的重点是为元素提供唯一标识符。如果您发现自己多次使用相同的ID，则应该是一个类。使用正确分类的元素，您应该能够有效地使用CSS的选择器。

那就是说，你仍然会有问题。你不能让以前的文字消失而不会使整个区域消失，所以我认为你必须尝试另一种方法。将新文本嵌套在原始div中会使其更容易。

如果这不是一个选项（但它确实应该是！），你可能会尝试将Hello文本淡化为黄色，快速隐藏hello div并切换再见div，然后淡出再见文字为黑色。绝对是一个黑客，但有时这是必要的。

请参阅animate（）了解褪色。 http://jqueryui.com/animate/

Answer 3

如果您先修复html，这非常简单：

<button id="change">Change</button>
<div>
    <div class="box"> 
        <p class="hello">Hello, this is text1</p>
        <p class="goodbye">Goodbye, this is text1</p>
    </div>
    <div class="box">
        <p class="hello">Hello, this is text2</p>
        <p class="goodbye">Goodbye, this is text2</p>
    </div>
</div>

然后你的jQuery变成了：

$('.goodbye').hide();

$('#change').click(function () {
    $('.hello').fadeOut(200, function () {
        $('.goodbye').fadeIn(600);
    });
});

Demo

如何淡化特定div中的文本

3 个答案: