Question

Ok. I know this is probably pretty simple, but I am having a difficult time with it :/.

I am trying to make Divs FadeIn when they are appended to a parent div. My problem is, that when new divs are appended, all of them fade in.:

<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);
});

I know that it is because the fadeIn(3000) is attached to the parent because it is starting with $(‘#textResp’), but how do you attach this to the created object?

Thanks,

Taylor

Answer 1

Simply create your element via a jQuery and call the hide() and fadeIn() methods on that object and not #textResp

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

Example on jsfiddle

Side note, I am sure this is just a generalized example, but the id should be unique.

$('#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