Wpływ na dołączanie nie zadziała, ponieważ zawartość wyświetlana w przeglądarce jest aktualizowana natychmiast po dołączeniu elementu div. Tak więc, aby połączyć odpowiedzi Marka B i Steerpike:
Styl dołączanego div jako ukrytego, zanim faktycznie go dołączysz. Możesz to zrobić za pomocą wbudowanego lub zewnętrznego skryptu CSS lub po prostu utworzyć element div jako
<div id="new_div" style="display: none;"> ... </div>
Następnie możesz połączyć efekty do swojego dodatku ( demo ):
$('#new_div').appendTo('#original_div').show('slow');
Lub ( demo ):
var $new = $('#new_div');
$('#original_div').append($new);
$new.show('slow');
.append()
, nie przyjmuje nawet ciągu selektora. Pomysł jest jednak nadal poprawny. Dzięki, zaktualizowane.Istota jest taka:
To działa dla mnie:
lub:
źródło
'normal'
nie jest odpowiednim ciągiem do szybkości. pozostaw to pole puste, aby uniknąć przejścia (pojawia się natychmiast). użyj łańcucha'fast'
przez 200 ms lub'slow'
600 ms. lub wpisz dowolną liczbę, na przykład$("element").show(747)
(= 747 ms), aby zdefiniować własną prędkość. zobacz dokumentację i poszukaj animacji / czasu trwania.element.slideUp("slow", function(){ element.appendTo(parent).hide(); element.slideDown(); });
Inny sposób podczas pracy z przychodzącymi danymi (np. Z wywołania AJAX):
źródło
Coś jak:
powinno to zrobić?
Edycja: przepraszam, pomyliłem się w kodzie i wziąłem też na pokład sugestię Matta.
źródło
$('#divid').append('#newdiv').hide().show('slow')
.Kiedy dołączasz do elementu div, ukryj go i pokaż z argumentem
"slow"
.źródło
Ustaw dołączony element div, aby był początkowo ukryty za pomocą css
visibility:hidden
.źródło
Potrzebowałem podobnego rozwiązania, chciałem dodać dane na ścianie, takiej jak facebook, po opublikowaniu, użyć
prepend()
do dodania najnowszego postu na górze, pomyślałem, że może być przydatny dla innych.kod w ajax.php to
źródło
Dlaczego po prostu nie ukryjesz, nie dołączysz, a potem nie pokażesz, w ten sposób:
źródło
Możliwe jest pokazanie płynności, jeśli używasz animacji. W stylu wystarczy dodać „animacja: pokaż 1s”, a cały wygląd opisz w klatkach kluczowych.
źródło
W moim przypadku:
możesz dostosować swój css z widocznością: ukryty -> widoczność: widoczny i dostosować przejścia itp. przejście: widoczność 1.0s;
źródło