Fade etkisi olan bir öğe ekleyin [jQuery]

121

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

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

Bu işe yaramıyor gibi görünüyor.

Sadece içerik eklendiğinde harika bir efekt istiyorum.

Not: Yalnızca yeni "blah" div'in görünmesini istiyorum, "içeriğimin" tamamının değil.

— TIMEX
kaynak

Fadein ve append

— kullanımının

262

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

— icktoofay
kaynak

1

Sadece yeni "blah" div'in görünmesini istiyorum.

— TIMEX

@TIMEX: Bunun yapması gereken bu.

— icktoofay

Önce gizleyip sonra eklemenizin bir nedeni var mı (çünkü DOM'a eklemeden önce bir stil ayarlamak daha hızlıdır veya buna benzer bir şey) veya bir fark yaratmıyor mu?

— qwertymk

2

@qwertymk: Gerçek bir sebep yok. DOM hala manipüle edilirken tarayıcılar herhangi bir zamanda render edilmiş olsaydı (şu anda hiçbir tarayıcı bildiğim kadarıyla bunu yapmaz), içeriğin kaybolmaya başlamadan önce herhangi bir flash içeriği olmayacaktı. Yine, gerçekten önemli değil.

— icktoofay

1

@ArthurTarasov: Bu #blahkendi kendine ekleniyor , ki bu senin yapmak istediğin bir şey gibi görünmüyor (ve sanırım bu işlemin yapılmaması olarak yorumlanıyor). En iyisi .appendToparçayı bırakıp kullan $('#mycontent').hide().fadeIn(1000).

— icktoofay

52

Biraz daha bilgi eklemek:

jQuery, "yöntem zincirleme" uygular; bu, aynı öğe üzerinde yöntem çağrılarını zincirleyebileceğiniz anlamına gelir. İlk durumda:

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

bu durumda, fadeInçağrıyı yöntem zincirinin hedefi olan nesneye uyguluyor olursunuz #mycontent. İstediğin değil.

@ İcktoofay'in (harika) cevabında var:

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

Bu, temelde, oluşturmak, htmlvarsayılan olarak gizli olarak ayarlamak, eklemek #mycontentve sonra açmak anlamına gelir . Yöntem zincirinin hedefi artık hmtlyerine #mycontent.

— Pablo Fernandez
kaynak

18

Bu da işe yarar

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

Saygılarımızla

— Mohd Sakib
kaynak

Bu, HTML'nin tamamen oluşturulmasına ve

— kaybolmadan

0

fadeIn, gizlemeden gösteriye bir geçiş olduğundan, eklediğinizde "html" öğesini gizlemeniz ve sonra göstermeniz gerekir.

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

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

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

Snippet'i genişlet

— cristisst
kaynak