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

Question

Я загружаю данные JSON на свою страницу и использую appendTo (), но я пытаюсь добавить свои результаты, есть идеи?

$("#posts").fadeIn();
$(content).appendTo("#posts");

Я видел, что есть разница между append и appendTo в документах.

Я тоже это попробовал:

$("#posts").append(content).fadeIn();

Я понял, выше все получилось!

Но я получаю "undefined" как одно из моих значений JSON.

Answer 1

Если вы скрываете контент перед его добавлением и связываете с ним метод 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();

Answer 2

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

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

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

Answer 3

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

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

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

Answer 4

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

Answer 5

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

<code>
   commmand(); 
   animation(); 
   command();  

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

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

   command(); 
   animation( ... function(){ 
      command(); 
   });
</code>

Answer 6

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

.new {display:none} 

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

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

Answer 7

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

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

Answer 8

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

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

Answer 9

у меня есть экспансив, для этого:

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