İletişime Geç
İletişime Geç +90 (850) 241 76 90
Profesyonel Web Tasarım ve Web Yazılım Çözümleri
Türkçe

tr

Dil Seçimi

jQuery Fading (fadeIn, fadeOut, fadeToggle, fadeTo) Metodu

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.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

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.)

<button id="fadeIn">fadeIn<button>
<div id="kutu1"></div>

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

#kutu1{background-color:red;width:75px;height:75px;display:none;}

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:

$("button#fadeIn").click(function(){
  $("#kutu1").fadeIn();
});

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.

Yorum Yap