Как FadeIn добавленного Div без отображения Fading In All Div?

Question

Хорошо.Я знаю, что это, вероятно, довольно просто, но мне трудно с этим: /.

Я пытаюсь сделать Divs FadeIn, когда они добавляются в родительский div.Моя проблема в том, что, когда добавляются новые div, все они исчезают.он начинается с $ ('# textResp'), но как вы присоединяете это к созданному объекту?

Спасибо,

Тейлор

Answer 1

Скрыть это с самого начала, а затем просто показать последний

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

демо: http://jsfiddle.net/xp6fU/

Answer 2

Просто создайте свой элемент с помощью jQuery и вызовите методы hide() и fadeIn() для этого объекта, а не #textResp

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

Пример для jsfiddle

Примечание , я уверен, что это всего лишь обобщенный пример, но идентификатор должен быть уникальным.

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

Пример для jsfiddle

Answer 3

Две проблемы:

Во-первых, все ваши добавленные div имеют одинаковые идентификаторы 'hi'.В качестве отдельных элементов им нужны разные идентификаторы.

Во-вторых, вы используете fadeIn (3000) для $ ('# textResp'), а не для присоединенного div.Попробуйте что-то вроде этого:

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

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

Answer 5

Попробуйте поменять порядок своей цепочки. Я бы сделал это так ...

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

Таким образом, когда вы «исчезаете», вы все еще находитесь в контексте вновь созданного div. Исходя из вашего вопроса, я предполагаю, что это желаемое поведение. Это намного проще, чем другие 2 ответа, которые я наблюдал.