jQuery korzystając dołączania z efektami

Question

Jak mogę używać .append() z efektami jak show('slow')

mające skutki na append nie wydają się działać w ogóle, a to daje taki sam wynik jak normalnego show(). Bez przejść, bez animacji.

Jak dodać jeden element div do innego i czy ma on na sobie efekt slideDown lub lub ?

Answer 1

Po dodaniu efektów do pliku append nie będzie działać, ponieważ treść wyświetlana w przeglądarce jest aktualizowana natychmiast po dodaniu elementu div. Tak więc, aby połączyć odpowiedzi Mark B i Steerpike'a:

Oznacz div, który dodajesz jako ukryty, zanim go dodasz. Można to zrobić z wbudowanych lub zewnętrznych skryptu CSS, lub po prostu tworzyć div jako

<div id="new_div" style="display: none;"> ... </div> 

Następnie możesz efekty łańcuch swojej append (demo):

$('#new_div').appendTo('#original_div').show('slow'); 

Albo (demo):

var $new = $('#new_div'); 
$('#original_div').append($new); 
$new.show('slow'); 

Answer 2

Ustaw dołączony div jako początkowo ukryty przez css visibility:hidden.

Answer 3

Coś jak:

$('#test').append('<div id="newdiv">Hello</div>').hide().show('slow'); 

powinien to zrobić?

Edycja: przepraszam, pomyłka w kodzie i wziąłem też sugestię Matta na pokładzie.

Answer 4

istotą jest to:

1. Dzwonisz 'append' na rodzica
2. ale chcesz zadzwonić 'show' na nowym dzieckiem

Działa to dla mnie:

var new_item = $('<p>hello</p>').hide(); 
parent.append(new_item); 
new_item.show('normal'); 

czyli

$('<p>hello</p>').hide().appendTo(parent).show('normal'); 

Answer 5

Innym sposobem pracy z danymi przychodzącymi (np. Z połączenia ajax):

var new_div = $(data).hide(); 
$('#old_div').append(new_div); 
new_div.slideDown(); 

Answer 6

byłem w potrzebie podobnego rodzaju rozwiązania, chciał dodać dane na ścianie jak Facebook, kiedy pisał, użyj prepend() dodać ostatni post na górze, że może być przydatny dla innych ..

$("#statusupdate").submit(function() {  
      $.post(
      'ajax.php', 
      $(this).serialize(), 
      function(data){ 

       $("#box").prepend($(data).fadeIn('slow'));     
       $("#status").val(''); 
      } 
     ); 
      event.preventDefault(); 
     }); 

kod w ajax.PHP jest

if (isset($_POST)) 
{ 

    $feed = $_POST['feed']; 
    echo "<p id=\"result\" style=\"width:200px;height:50px;background-color:lightgray;display:none;\">$feed</p>"; 


} 

Answer 7

Dlaczego nie można po prostu ukryć, dołączyć, a następnie pokazać, jak to:

<div id="parent1" style=" width: 300px; height: 300px; background-color: yellow;"> 
    <div id="child" style=" width: 100px; height: 100px; background-color: red;"></div> 
</div> 


<div id="parent2" style=" width: 300px; height: 300px; background-color: green;"> 
</div> 

<input id="mybutton" type="button" value="move"> 

<script> 
    $("#mybutton").click(function(){ 
     $('#child').hide(1000, function(){ 
      $('#parent2').append($('#child')); 
      $('#child').show(1000); 
     }); 

    }); 
</script> 

Answer 8

Po dołączeniu do div, ukryć i pokazać to z argument "slow".

$("#img_container").append(first_div).hide().show('slow'); 

Answer 9

Można wyświetlać płynnie, jeśli korzystasz z animacji. W stylu wystarczy dodać "animacja: pokaż 1" i cały wygląd opisać w klatkach kluczowych.

Answer 10

W moim przypadku:

$("div.which-stores-content").append("<div class="content">Content</div>); 
$("div.content").hide().show("fast"); 

można dostosować css z visibility: hidden -> widoczność: widoczne i dostosować przejścia itp przejście: widoczność 1.0s;