0

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

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

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

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

基本上，我只希望#information div 中的文本fadeOut 和fadeIn 来自另一个div-wrap 的新文本。

我将如何实现这一目标？

这是jQuery：

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

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

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

});
4

3 回答 3

1

正如我在评论中所说，您不应该对不同的元素使用相同的 id。话虽如此，您始终可以使用.first()例如过滤以前的选择

签出：http ://api.jquery.com/first/

也，就像.first()你有其他过滤器.last()一样.eq()

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

于 2013-05-25T01:21:53.973 回答
1

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

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

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

请参阅 animate() 以了解褪色。http://jqueryui.com/animate/

于 2013-05-25T01:26:34.640 回答
0

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

演示

于 2013-05-25T01:43:56.440 回答