Bu yazımızda jQuery kullanarak animasyonları nasıl yapabileceğimizi anlatacağım. jQuery ile animasyonları yapabilmek için animate() metodunu kullanıyoruz.
animate() Metodu ve Kullanımı
jQuery’de animate() metodunun kullanımı şu şekilde:
|
1 2 3 |
$(secici).animate({parametreler}, hiz, geri donus); |
Kullanımını biraz daha detaylandıracak olursak:
⇒ İlk olarak animasyon uygulamak istediğimiz Html öğesini seçiyoruz.
⇒ Daha sonra animate() metodu içerisinde animasyon için gerekli olan Css kodlarını yazıyoruz. Bu alanı (parametreler) yazmak zorundayız.
⇒ Hız parametresi opsiyoneldir ve “slow”, “fast” değerlerini alabildiği gibi milisaniye cinsinden de bir değer verebiliyoruz.
⇒ Geri dönüş parametresi opsiyoneldir ve animasyon kodlarımız tamamen sonlandıktan sonra çalışmasını istediğimiz kodlar varsa bu kısımda yazıyoruz.
Şimdi örnek bir uygulama yapalım ve konuyu daha iyi anlamaya çalışalım.
Örneğimizde 3 farklı animasyon uygulayacağız.
⇒ Animasyon-1 butonuna tıklandığında seçtiğimiz Html öğesini soldan sağa 100px kaydırıp, boyutunu büyültüp son olarak şeffaflığını yarıya düşürelim.
⇒ Animasyon-2 butonuna her tıklandığında seçtiğimiz Html öğesinin border-radius değerini 10% arttırıp yuvarlak hale getirelim.
⇒ Animasyon-3 butonuna her tıklandığında seçtiğimiz Html öğesini gizle-göster mantığıyla görünür ise gizleyelim, gizliyse görünür hale getirelim.
⇒ Başlangıç değerlerine dön butonuna tıklandığında seçtiğimiz Html öğesine uyguladığımız tüm özellikleri kaldırıp başlangıç değerlerine döndürelim.
Html Kodları
|
1 2 3 4 5 6 7 8 9 |
<button id="reset">Başlangıç Değerlerine Dön</button> <br /> <button id="animate-1">Animasyon-1</button> <button id="animate-2">Animasyon-2</button> <button id="animate-3">Animasyon-3</button> <div id="box"></div> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#box { width: 100px; height: 100px; position: relative; background-color: blueviolet; margin: 10px; } button { margin: 10px; padding: 6px 12px; } |
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 30 31 32 33 34 35 36 37 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> $(document).ready(function () { $("#reset").click(function () { $("#box").css({ left: '0px', opacity: '1', height: '100px', width: '100px', display: 'block', borderRadius: '0%' }); }); $("#animate-1").click(function () { $("#box").animate({ left: '100px', opacity: '0.5', height: '150px', width: '150px' }); }); $("#animate-2").click(function () { $("#box").animate({ borderRadius: '+=10%' }); }); $("#animate-3").click(function () { $("#box").animate({ width: 'toggle' }); }); }); |
stop() Metodu ve Kullanımı
stop() metodu ise animasyonları veya efektleri tamamlanmadan durdurmak için kullanılır.
jQuery’de stop() metodunun kullanımı şu şekilde:
|
1 2 3 |
$(secici).stop(stopAll, goToEnd); |
⇒ Burada stopAll parametresi opsiyoneldir ve varsayılan değeri false‘dur.
Varsayılan değeri ile kullanıldığında sadece etkin animasyonu veya efekti durdurur. Diğer animasyonların ise daha sonra gerçekleşmesine izin verilir.
⇒ goToEnd parametresi de opsiyoneldir ve varsayılan değeri false‘dur. Bu şekilde kullanıldığında etkin animasyon veya efekt tamamlanmadan sonlandırılır.
Şimdi örnek bir uygulama yapalım ve konuyu daha iyi anlamaya çalışalım.
Uygulamamıza bakacak olursak;
⇒ Başlat butonuna tıkladığımızda animasyon başlayacak. Seçtiğimiz Html öğesi soldan sağa, yukarıdan aşağıya, sağdan sola, aşağıdan yukarıya olacak şekilde hareket edip tekrar başlangıç noktasına gelecek. Animasyonun her adımı 3 saniyede gerçekleşecek.
⇒ Durdur butonuna tıkladığımızda o an animasyonun hangi adımı gerçekleşiyorsa sadece o adım duracak ve bir sonraki animasyon adımından devam edecek.
⇒ Hepsini Durdur butonuna tıkladığımızda tüm animasyonları durdurmuş olacağız.
⇒ Animasyonu Tamamla ve Durdur butonuna tıkladığımızda ise o anki animasyon adımını tamamlar ve durur.
Html Kodları
|
1 2 3 4 5 6 7 8 |
<button id="start">Başlat</button> <button id="stop">Durdur</button> <button id="stop-all">Hepsini Durdur</button> <button id="stop-finish">Animasyonu Tamamla ve Durdur </button> <div id="box"></div> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
#box { width: 100px; height: 100px; position: relative; background-color: blueviolet; margin: 10px; } button { margin: 10px; padding: 6px 12px; } |
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 30 31 32 33 34 35 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> $(document).ready(function () { $("#start").click(function () { var box = $("#box"); box.animate({ left: '300px', }, 3000); box.animate({ top: '50px', }, 3000); box.animate({ left: '0px', }, 3000); box.animate({ top: '0px', }, 3000); }); $("#stop").click(function () { $("#box").stop(); }); $("#stop-all").click(function () { $("#box").stop(true); }); $("#stop-finish").click(function () { $("#box").stop(true, true); }); }); |
Butonlara tıklayıp etkilerini incelerseniz daha anlaşılır olacaktır.
Umarım sizin için faydalı bir yazı olmuştur.
Şu yazılar da ilginizi çekebilir.
jQuery text(), html(), val() Metodları ve Kullanımları
jQuery Nedir? jQuery Ne İşe Yarar? jQuery Kullanımı
Yeni bir yazımda görüşmek üzere.
, stop() Metodları ve Kullanımları){kind=link}