jQuery Fading (fadeIn, fadeOut, fadeToggle, fadeTo) Metodu - Sinan Yorulmaz

Sinan Yorulmaz


Bir Yazılımcının Günlüğü

08 Ağustos 2016
jQuery Fading (fadeIn, fadeOut, fadeToggle, fadeTo) Metodu

jQuery
8 Ağustos 2016 JavaScript 270 Okuma Yorum Yok

Bugün sizlere projelerimde belki de en çok kullandığım jQuery metodu olan Fading’den bahsedeceğim. Bir çok konuda bana yardımı dokunan bu metotun kullanımı ve uygulaması oldukça kolay. Lafı hiç uzatmadan metodumuzun uygulamasına geçelim.

fadeIn, fadeOut, fadeToggle, fadeTo şeklinde 4 farklı varyasyonu olan Fading metodunu kullanabilmek için öncelikle jQuery’nin son sürümünü sistemimize dahil etmemiz gerekiyor. Bunun içinde aşağıdaki kodu <head> ve </head> etiketleri arasına yerleştirmeniz yeterlidir.

Sonrasında HTML dosyanız içerisinde bir buton oluşturun, tabi dilerseniz sadece bir link de oluşturup kullanabilirsiniz, bu size kalmış. Butondan hemen sonra da bir DIV oluşturup, kutu şekline getirelim. (Yine ben örnek vermek amaçlı böyle bir şey yapıyorum, sizde aynı şekilde kutuya uygulamak zorunda değilsiniz. Herhangi bir DIV’e uygulayabilirsiniz.)

Daha sonra da “kutu1” diye oluşturduğumuz DIV’imize biraz CSS kodu ile müdehale ederek gerçekten de bir kutuya çevirelim.

Burada önemli nokta, fadeIn metodu, var olmayan bir şeyi var edeceği için DIV’imizin “display:none;” olması yani aslında gözükmemesi. (Bu durum fadeOut metodunda ise tam tersi. DIV’in “display:none;” değerine sahip olmasına gerek yok. Zaten görünen bir DIV’i yok edeceğiz.)

Son olarak JS kodlarımızı da yazalım:

JS kodlarımız içerisinde fadeIn fonksiyonuna “slow” veya 3000 gibi değerler girerek animasyonumuzun hızını ayarlayabiliyoruz. Örneğin .fadeIn(“slow”); gibi.

fadeOut, fadeToggle ve fadeTo metotlarınıda içeren uygulamanın çalışır halini hemen aşağıdan görebilirsiniz.

See the Pen jQuery Fading Methots by Sinan (@sinanyorulmaz) on CodePen.

Yorum Yap

Copyright © 2015. Tüm haklarım anneme aittir. Babama yakalanmadığınız sürece sorun yok!