Добавить элемент с эффектом затухания [jQuery]

121

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

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

Похоже, это не работает.

Мне просто нужен крутой эффект при добавлении контента.

Примечание: я хочу, чтобы исчез только новый div «blah», а не весь «mycontent».

— TIMEX
источник

возможный дубликат использования fadein и append

— пользователь

262

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

— icktoofay
источник

1

Я хочу, чтобы исчез только новый div "blah".

— TIMEX

@TIMEX: Вот что это должно делать.

— icktoofay

Есть ли причина, по которой вы сначала скрываете, а затем добавляете (потому что быстрее сначала установить стиль перед присоединением к DOM или что-то в этом роде) или это не имеет значения?

— qwertymk

2

@qwertymk: Настоящей причины нет. Если бы браузеры когда-либо отображались, пока DOM все еще манипулировали (что, насколько мне известно, в настоящее время не делает ни один браузер), не было бы никакой вспышки содержимого, прежде чем оно начало бы исчезать. Опять же, это не очень важно.

— icktoofay

1

@ArthurTarasov: Это присоединяется #blahк самому себе, что не похоже на то, что вы хотите сделать (и я предполагаю, что это интерпретируется как бездействие). С таким же успехом вы можете просто бросить .appendToдеталь и использовать $('#mycontent').hide().fadeIn(1000).

— icktoofay

52

Добавляем еще немного информации:

jQuery реализует «цепочку методов», что означает, что вы можете объединять вызовы методов в один и тот же элемент. В первом случае:

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

вы бы применили fadeInвызов к объекту, который является целью цепочки методов, в этом случае#mycontent . Не то, что вы хотите.

В ответе @ icktoofay (отличный) у вас есть:

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

По сути, это означает, что htmlнужно создать , установить его как скрытый по умолчанию, добавить #mycontentи затем постепенно усилить. Теперь целью цепочки методов является hmtlвместо #mycontent.

— Пабло Фернандес
источник

18

Это тоже работает

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

С уважением

— Мохд Сакиб
источник

Это наиболее эстетически приятный способ справиться с затуханием, поскольку он позволяет полностью скомпоновать HTML и создать

— Антонио

0

поскольку fadeIn - это переход от скрытия к отображению, вам придется скрыть элемент «html» при его добавлении, а затем показать его.

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

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

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

Развернуть фрагмент

— cristisst
источник