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 回答