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

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

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

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

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

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

Я понял, вышесказанное сделало свое дело!

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

Ответ 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();

Ответ 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;
    });

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

Ответ 3

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

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

Если вы делаете append вместо этого, вместо этого вы должны использовать последний селектор.

Ответ 4

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


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

This is because the animation uses set timeout and other similar magic to do its job and settimeout is non-blocking.

This is why we have callback methods on animations to run when the animation is done ( to avoid changing something which doesn't exist yet )

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

Ответ 5

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

Ответ 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();

Ответ 7

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

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

Ответ 8

im имеют экстраординарный характер, для этого:

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

Ответ 9

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

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