如何在不淡入所有显示的 Div 的情况下淡入附加的 Div？答案

【问题标题】：How to FadeIn an Appended Div without Fading In All Divs displayed?如何在不淡入所有显示的 Div 的情况下淡入附加的 Div？
【发布时间】：2011-08-26 00:31:27
【问题描述】：

好的。我知道这可能很简单，但我遇到了困难：/。

我正在尝试将 Divs FadeIn 附加到父 div 中。我的问题是，当添加新的 div 时，它们都会淡入。：

<div id="click">Click Me</div>
<div id="textResp"></div>


$('#click').live('click',function() {
$('#textResp').append("<div id='hi' class='eventdiv'>hello</div>").hide().fadeIn(3000);
});

我知道这是因为fadeIn(3000) 附加到父级，因为它以$('#textResp') 开头，但是如何将它附加到创建的对象？

谢谢，

泰勒

【问题讨论】：

标签： jquery jquery-ui jquery-plugins jquery-selectors

【解决方案1】：

只需通过 jQuery 创建您的元素，然后在该对象上调用 hide() 和 fadeIn() 方法，而不是 #textResp

$('#click').live('click', function() {
    var $d = $("<div id='hi' class='eventdiv'>hello</div>").hide().fadeIn(3000);
    $('#textResp').append($d)
});

Example on jsfiddle

旁注，我确信这只是一个概括的例子，但 id 应该是唯一的。

$('#click').live('click', function() {
    var $d = $("<div/>", {
        id: 'hi' + $('#textResp').children().length, //generate a unique id
        class: 'eventdiv',
        html: 'hello'
    }).hide().fadeIn(3000);

    $('#textResp').append($d);
});

Example on jsfiddle

【讨论】：

如何在 div 被附加到已经附加到 dom 的元素之前淡入它？在添加元素之前，无法调用 fadeIn。
fadeIn() 仍将在 jQuery 对象上运行，无论它是否附加到 dom。请参阅jsfiddle.net/markcoleman/Cx7wX/2，因为不透明度会在未附加到 dom 时发生变化。
这可能有效，但我仍然会说您正在利用一个不直观的怪癖。我刚刚尝试了我的代码，它也可以正常工作。我认为它更合乎逻辑地表达了意图，但就这样吧。

【解决方案2】：

从头开始隐藏，然后只显示最后一个

$('#click').live('click',function() {
    $('#textResp').append("<div style='display: none' class='eventdiv'>hello </div>");
    $('#textResp div:last-child').fadeIn(1000);
});

演示：http://jsfiddle.net/xp6fU/

【讨论】：

【解决方案3】：

尝试颠倒您的链条顺序。我会这样做......

$("<div id='hi' class='eventdiv'>hello</div>").appendTo("#textResp").hide().fadeIn(3000);

这样，当您“淡入”时，您仍处于新创建的 div 的上下文中。根据您的问题，我假设这是所需的行为。这比我观察到的其他 2 个答案要简单得多。

【讨论】：

这会将其附加到#click div。没有 hide() 它不会淡入
而且没有两个元素可以有相同的 id。 ;)
@Rob 我绝对同意。如果没有别的，他应该使用类属性。比如
什么的。

【解决方案4】：

这应该做你想做的：

<script type="text/javascript">
    var count=1;
    $('#click').live('click',function() {
        var id='hi'+count,
            elt=$('<div id="'+id+'" class="eventdiv">hello</div>');
        $('#textResp').append(elt.hide().fadeIn(3000));
        count++;
    });
</script>

【讨论】：

【解决方案5】：

两个问题：

首先，所有附加的 div 都具有相同的 id，“hi”。作为单独的元素，它们需要不同的 ID。

其次，您在 $('#textResp') 上使用了 fadeIn(3000)，而不是附加的 div。试试这样的：

$('#textResp').append("<div class='eventdiv'>hello</div>");
$('#textResp div:last-child').hide().fadeIn(3000);

【讨论】：