Dołącz element z efektem zanikania [jQuery]

121

var html = "<div id='blah'>Hello stuff here</div>"

$("#mycontent").append(html).fadeIn(999);

To nie działa.

Chcę tylko fajnego efektu, gdy treść zostanie dołączona.

Uwaga: chcę, aby pojawił się tylko nowy element div „blah”, a nie cała „moja zawartość”.

— TIMEX
źródło

możliwy duplikat użycia fadein i dołączania

— użytkownik

262

$(html).hide().appendTo("#mycontent").fadeIn(1000);

— icktoofay
źródło

1

Chcę, żeby pojawił się nowy div „blah”.

— TIMEX,

@TIMEX: To właśnie powinno zrobić.

— icktoofay,

Czy jest jakiś powód, dla którego najpierw ukrywasz, a potem dołączasz (ponieważ szybciej jest najpierw ustawić styl przed dołączeniem do DOM, czy coś w tym stylu), czy nie ma to znaczenia?

— qwertymk

2

@qwertymk: Nie ma prawdziwego powodu. Gdyby przeglądarki kiedykolwiek renderowały się, gdy DOM był nadal manipulowany (czego obecnie żadna przeglądarka nie robi, o ile wiem), nie byłoby żadnego flashowania zawartości, zanim zaczęłaby zanikać. Znowu, nie jest to naprawdę ważne.

— icktoofay,

1

@ArthurTarasov: To dołącza się #blahdo siebie, co nie wydaje się czymś, co chcesz zrobić (i zgaduję, że jest to interpretowane jako nie-op). Równie dobrze możesz po prostu upuścić .appendToczęść i użyć $('#mycontent').hide().fadeIn(1000).

— icktoofay,

52

Dodanie trochę więcej informacji:

jQuery implementuje "łańcuch metod", co oznacza, że możesz łączyć wywołania metod w tym samym elemencie. W pierwszym przypadku:

$("#mycontent").append(html).fadeIn(999);

w tym przypadku zastosowałbyś fadeInwywołanie do obiektu, który jest celem łańcucha metod #mycontent. Nie to, czego chcesz.

W (świetnej) odpowiedzi @ icktoofay masz:

$(html).hide().appendTo("#mycontent").fadeIn(1000);

Zasadniczo oznacza to, że utwórz element html, ustaw go jako ukryty domyślnie, dołącz go, #mycontenta następnie zaniknij. Celem łańcucha metod jest teraz hmtlzamiast #mycontent.

— Pablo Fernandez
źródło

18

To też działa

$(Your_html).appendTo(".target").hide().fadeIn(300);

pozdrowienia

— Mohd Sakib
źródło

Jest to najbardziej estetyczny sposób radzenia sobie z zanikaniem, ponieważ pozwala na pełne skomponowanie HTML i utworzenie potrzebnych wymiarów przed zniknięciem.

— Antonio Nogueras

0

ponieważ fadeIn jest przejściem z hide do show, będziesz musiał ukryć element „html” podczas dodawania go, a następnie go pokazać.

var html = "<div id='blah'>Hello stuff here</div>"

$("#mycontent").append(function(){
  return html.hide();
});

$('#blah').fadeIn(999);

Rozwiń fragment

— cristisst
źródło