Bu yazımda jQuery delay() metodunun ne işe yaradığını ve nasıl kullanabileceğimizi anlatacağım.
Şimdi delay() metodunun ne işe yaradığını ve nasıl kullanıldığını inceleyelim. Daha sonra da bu metodu kullanarak küçük bir uygulama yapalım.
delay() metodu ile yapmak istediğimiz bazı işlemleri belirlediğimiz süre kadar geç başlatabiliriz. Örneğin bir animasyonun 2 saniye geç başlaması veya bir butona tıklandığında yapılacak işlemlerin belirli bir süre geç başlaması vb.
jQuery delay() Metodunun Kullanımı
Parametre olarak milisaniye türünden bir değer veriyoruz.
|
1 2 3 |
$(seçici).delay(milisaniye); |
Kullanımını gördüğümüze göre artık bir örnek üzerinde uygulayalım.
Örneğimizde bir div ve bir button oluşturalım. Butona tıklandıktan sonra sırasıyla şu işlemleri gerçekleştirelim.
⇒ Div’in genişlik ve yükseklik değerini 50px yapıp, border-radius özelliğine 50% değeri vererek tam yuvarlak hale getirelim.
⇒ Sonra delay() metodu ile 3 saniye bekletip ardından fadeOut() metodu ile div’i gizleyelim.
⇒ Sonra delay() metodu ile 3 saniye bekletip ardından fadeIn() metodu ile gizlemiş olduğumuz div’i görünür hale getirelim.
⇒ Son olarak yine delay() metodu ile 3 saniye bekletip ardından div’i varsayılan Css değerlerine döndürelim.
Html Kodları
|
1 2 3 4 5 |
<button id="delay">Click</button> <div id="box"></div> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<style> body { margin: 20px; font-size: 18px; } button { padding: 10px; margin-bottom: 18px; background-color: cornflowerblue; color: #fff; border: none; cursor: pointer; font-size: 16px; } #box { width: 100%; height: 100px; background-color: tomato; } </style> |
jQuery Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function () { $("#delay").click(function () { $("#box").animate({ height: "50px", width: "50px", borderRadius: "50%" }); $("#box").delay(3000).fadeOut(); $("#box").delay(3000).fadeIn(); $("#box").delay(3000).animate({ height: "100px", width: "100%", borderRadius: "0px" }); }); }); </script> |
Butona tıklayarak div’e uygulanacak efektleri ve animasyonları inceleyebilirsiniz.
Umarım “jQuery delay() Metodu ve Kullanımı” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
jQuery fadeOut(), fadeIn(), fadeToggle(), fadeTo() Fonksiyonları ve Kullanımları
jQuery slideDown(), slideUp(), slideToggle() Fonksiyonları ve Kullanımları
Yeni bir yazımda görüşmek üzere.
 Metodu ve Kullanımı){kind=link}