Javascript 如何在特定div中淡入文本

我知道解决这个问题的简单方法是：

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

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

两次，这似乎不起作用

以下是JSFIDLE：

基本上，我只希望来自#information div的文本淡出，并淡入另一个div wrap的新文本

我将如何实现这一点

以下是jQuery：

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

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

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

});

---

正如我在评论中所说，您不应该对不同的元素使用相同的id。话虽如此，您始终可以使用

.first（）

来过滤以前的选择

退房：

另外，像

.first（）

您还有其他过滤器，比如

.last（）

或

.eq（）

---

编辑：我越来越接近你想要的了

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

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

如果这不是一个选项（尽管，它确实应该是！），您可以尝试将Hello文本淡入黄色，快速隐藏Hello div并切换到再见div，然后将再见文本淡入黑色。当然是黑客，但有时这是必要的

---

请参见动画（）以了解颜色褪色

如果您首先修复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>

---

您不应该对不同的元素使用相同的id如果我改用class，会有什么不同？我想我仍然会遇到问题。@BradleyMitchell，看，一个元素可以有多个类，多个元素可以有同一个类。。但是一个元素不能有多个id，两个元素不能有相同的id。。这是最坏的做法。所以使用类instead@BradleyMitchell，您可以更改html结构吗？似乎无法实现我想要的。我不想黄色的盒子消失。我只想让它们上面的文字随着旧的逐渐消失，随着新的逐渐消失。我一直在使用.eq（），但我还没有让它工作。只需将文本包装在

中，给它一个类名并隐藏它，或显示它是的，但我遇到的困难是同时使用这两个类名（或使用多个框）。好的，我修复了它并更新了JSFIDLE，但是我仍然需要修复我原来的问题。请参阅编辑。多个#会引起真正强烈的下意识反应。。。但你的问题是正确的。

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

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