Bu yazımda jQuery finish() metodunun ne işe yaradığını ve nasıl kullanabileceğimizi anlatacağım.
Şimdi finish() 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.
finish() metodu, çalışan bir animasyonu sonlandırmamızı sağlar. O anki çalışan animasyonu durdurur. Eğer kuyrukta başka animasyonlar varsa onları da animasyonsuz bir şekilde tamamlar.
jQuery finish() Metodunun Kullanımı
|
1 2 3 |
$(seçici).finish(); |
Kullanımını gördüğümüze göre artık bir örnek üzerinde uygulayalım.
Örneğin 1 div ve 2 button oluşturalım. “Animasyonu Başlat” butonuna tıklandığında 5’er saniyelik iki animasyonu başlatalım.
Eğer “Bitir” butonuna tıklanırsa 10 saniye sürecek animasyonların uygulanmasını beklemeden sonlandıralım.
Html Kodları
|
1 2 3 4 5 6 7 |
<button id="start">Animasyonu Başlat</button> <button id="finish">Bitir</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; } #box { width: 100%; height: 100px; background-color: blueviolet; } button { padding: 10px; margin-bottom: 18px; background-color: tomato; color: #fff; border: none; cursor: pointer; font-size: 16px; } </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 29 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function () { $("#start").click(function () { $("#box").animate({ height: "50px", width: "50px", borderRadius: "50%", }, 5000); $("#box").animate({ height: "100px", width: "100%", borderRadius: "0", }, 5000); }); $("#finish").click(function () { $("#box").finish(); }); }); </script> |
“Animasyonu Başlat” butonuna tıkladığınızda yazdığımız animasyonun gerçekleşmesi 10 saniye sürecek. Ama animasyon devam ederken “Bitir” butonuna tıklarsanız animasyon durdurulur ve son halini alır.
Umarım “jQuery finish() Metodu ve Kullanımı” başlıklı yazım sizin için faydalı olmuştur.
Şu yazılar da ilginizi çekebilir.
jQuery trim() Metodu ve Kullanımı
jQuery delay() Metodu ve Kullanımı
Yeni bir yazımda görüşmek üzere.
 Metodu ve Kullanımı){kind=link}