JQuery .html() ile fadeIn() neden çalışmaz?

30 Nisan 2012
Bu yazıyı beğendiysen paylaşmayı unutma :)
Pin It

jquery fadein

JQuery ile çalışmalarınızda .html() kullanarak element içeriğini değiştirme işlemi yaptığınızda bunun fadeIn() gibi bir animasyonla çalışmasını istiyorsanız küçük bazı problemlerle karşılaşabilirsiniz. Gelin bu sorunun ne olduğunu ve nasıl çözeceğimize bir bakalım.

Sorunu daha iyi anlamak için aşağıdaki kodumuza bir göz atalım.

$(‘#mesajKutusu’).html(“Yeni içerik”).fadeIn(‘slow’);

Normal şartlar altında .html() komutunu kullanmadan fadeIn’i kullanmış olsak bu satır sorunsuz çalışacak, ama istediğimiz animasyonu gerçekleştiremeyecekti. Bunun için kodu aşağıdaki şekilde toparlamak mümkün.

$(‘#mesajKutusu’).hide().html(“Yeni içerik”).fadeIn(‘slow’);

Bu çözüme Stackoverflow üzerindeki “Why doesn’t jquery fadeIn() work with .html()?” adresinden ulaşabilirsiniz. Ancak bu çözümde de şöyle bir sıkıntı var. “#mesajKutusu” elementine .hide() uygulayıp sonra diğer işlemleri gerçekleştirdiğimizde elementin bir anlık kaybolup tekrar gelmesi sebebiyle tasarımlarımızda kayma oluşması gibi gerçekten berbat bir görüntü oluşup tekrar toparlanıyor.

Bu düzeltmek için ise yapmamız gereken #mesajKutusu elementine sabit boyutlar vererek, içerisine #mesajKutusuIcBolge gibi yeni bir div oluşturarak kodumuzu aşağıdaki gibi düzenlemek.

$(‘#mesajKutusuIcBolge’).hide().html(“Yeni içerik”).fadeIn(‘slow’);

Bu değişiklikten sonra işlemleriniz sorunsuz şekilde çalışacaktır.

Benzer Yazılar


DeliPenguen'i Google+'da bulun



  1. 6 Haziran 2012 - 15:38

    yazı için teşşekkürler çok yardımcı oldu

  2. 11 Eylül 2012 - 23:30

    Çok faydalı bir bilgi paylaşım için teşekkürler