С помощью fadein и append

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

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

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

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

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

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

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

9 74
javascript jquery fadein

9 ответов:

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

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

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, чтобы он не отображался, а затем исчезал.

7

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

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

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

4

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


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

это потому, что анимация использует set timeout и другие подобные магии, чтобы сделать свою работу и settimeout не блокируется.

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

   command(); 
   animation( ... function(){ 
      command(); 
   });
3
$(output_string.html).fadeIn().appendTo("#list");
3

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

.new {display:none}

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

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

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

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

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

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

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

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