Question

确定。我知道这可能很简单，但我很难用它：/。

我试图将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'）开头，但是如何将其附加到创建的对象？

谢谢，

泰勒

Answer 1

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

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

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

Answer 2

两个问题：

首先，你所有追加的div都有相同的id，'hi'。作为单独的元素，他们需要不同的ID。

其次，你在$（'＃textResp'）上使用fadeIn（3000），而不是附加的div。尝试这样的事情：

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

Answer 3

这应该做你想要的：

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

Answer 4

只需通过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

Answer 5

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

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

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

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

5 个答案: