Использование fadein и append

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

// Create the DOM elements
$(content)
// Sets the style of the elements to "display:none"
    .hide()
// Appends the hidden elements to the "posts" element
    .appendTo('#posts')
// Fades the new content into view
    .fadeIn();

Вы должны знать, что код не выполняется линейно. Нельзя ожидать, что анимированный материал остановит выполнение кода, чтобы выполнить анимацию, а затем вернется.

   commmand(); 
   animation(); 
   command();  

Это связано с тем, что в анимации для выполнения своей работы используется установленный тайм-аут и другая подобная магия, а settimeout не блокирует.

Вот почему у нас есть методы обратного вызова для анимации, которые запускаются, когда анимация завершена (чтобы избежать изменения чего-то, чего еще не существует).

   command(); 
   animation( ... function(){ 
      command(); 
   });

Я не знаю, полностью ли я понимаю вашу проблему, но должно сработать что-то вроде этого:

HTML:

<div id = "posts">
  <span id = "post1">Something here</span>
</div>

Javascript:

var counter=0;

$.get("http://www.something/dir",
    function(data){
        $('#posts').append('<span style = "display:none" id = "post' + counter + ">" + data + "</span>" ) ;
        $('#post' + counter).fadeIn();
        counter += 1;
    });

По сути, вы оборачиваете каждую часть контента (каждую «публикацию») в промежуток, устанавливая для этого диапазона отображение значения «none», чтобы он не отображался, а затем постепенно его усиливали.

Думаю, это должно решить вашу проблему.

$('#content').prepend('<p>Hello!</p>');
$('#content').children(':first').fadeOut().fadeIn();

Если вместо этого вы выполняете добавление, вам нужно вместо этого использовать селектор: last.

предполагая, что в css определено следующее:

.new {display:none} 

и javascript должен быть:

$('#content').append('<p class='new'>Hello!</p>');
$('#content').children('.new').fadeIn();
$('#content').children.removeClass('new');
$('#content').children('.new').hide();

Сначала конвертируем полученные данные в объект jQuery. Во-вторых, немедленно спрячьте это. В-третьих, добавьте его к целевому узлу. И после всего этого мы можем явно использовать необходимую анимацию, как и fadeIn :)

jNode = $("<div>first</div><div>second</div>");
jNode.hide();
$('#content').append(jNode);
jNode.fadeIn();

У меня есть выразительный, для этого:

$("dt").append(tvlst.ddhtml);
$("dd:last").fadeIn(700);

$(output_string.html).fadeIn().appendTo("#list");

Я попробовал то, что вы сказали, помогло, но не работает. он работал со следующим кодом

$("div").append("content-to-add").hide().fadeIn();