jQuery Efektleri - Animasyon (Animate)
jQuery Efektleri - Animasyon (Animate)
jQuery animate() metodu, kullanıcının kendi animasyonlarını sağlamasına olanak verir.
Yazılış biçimi:
$(seçici).animate({parametreler},hız,geriçağırma);
Kullanımı zorunlu olan parametreler, anime edilecek CSS özelliklerini tanımlar. Kullanımı isteğe bağlı olan hız parametresi, efektin süresini belirler; "slow" (yavaş), "fast" (hızlı) ya da milisaniye değerlerinden birini alır. Yine kullanımı isteğe bağlı olan geriçağırma (callback) parametresi, animasyon tamamlandıktan sonra çalıştırılacak bir fonksiyondur.
Aşağıda animate() efektine dair bir örnek HTML5 kodu var. Dikkatle inceleyelim:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({height: '300px', opacity: '0.4'}, "slow");
});
});
</script>
</head>
<body>
<button >BASLA</button>
<div style="background:#92be24;height:50px;width:70px;position:absolute;">
</div>
</body>
</html>
Başla düğmesine tıkladığınız zaman yeşil kare uzayacaktır.
jQuery animate() Metodu - Çoklu Özelliklerin İşlenmesi
Aynı anda çok sayıda özellik animasyona katılabilir. Aşağıdaki örnekte konum, büyüklük ve saydamlık değiştirilerek dikdörtgen şeklindeki nesne BAŞLA düğmesiyle hareket ettirilmektedir.
Örneğimizi dikkatle inceleyelim:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left: '250px',
opacity: '0.5',
height: '150px',
width: '150px'
});
});
});
</script>
</head>
<body>
<button>BASLA</button>
<div style="background:#56aaaa;height:110px;width:80px;position:absolute;"></div>
</body>
</html>
BAŞLA düğmesine tıklanınca dikdörtgen büyüyecek ve sağa doğru hareket edecektir.
jQuery animate() – Bağıl (Relative) Değerler
+= ya da -= sembolleri yardımıyla parametre değerleri o andaki değerlerine ekleme ya da çıkarma yapılarak bağıl biçimde tanımlanabilir.
Aşağıdaki jQuery kodu bununla ilişkilidir:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'240px',
opacity:'+=0.1',
height:'+=30px',
width:'+=15px'
});
});
});
</script>
</head>
<body>
<button>BASLA</button>
<p></p>
<div style="background:#56aaff;height:110px;width:80px;position:absolute;">
</div>
</body>
</html>
BAŞLA düğmesine bastığınızda nesne sağa doğru, aşağıdaki şekilde görülen noktaya kadar büyüyerek hareket edecektir. Bundan sonra BAŞLA düğmesine her tıkladığınızda nesnenin büyüdüğünü gözleyeceksiniz.
jQuery animate() - Kuyruk (Queue) İşlevselliği
Öntanımlı olarak jQuery, animasyonlar için kuyruk işlevselliği ile gelir. Bu işlevselliğin anlamı şudur: Peşi sıra çok sayıda animate() çağrıları yapılırsa, jQuery bir iç kuyruk oluşturur. Böylece animate() çağrılarını birer birer gerçekleştirir.
Eğer farklı animasyonları peş peşe gerçekleştirmek istiyorsanız, kuyruk işlevselliğinden yararlanabilirsiniz:
$("button").click(function(){
var div=$("div");
div.animate({height:'200px',opacity:'0.6'},"slow");
div.animate({width:'200px',opacity:'0.9'},"slow");
div.animate({height:'300px',opacity:'0.5'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
});
Şimdi örnek HTML5 kodumuzu inceleyelim:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'290px',opacity:'0.3'},"slow");
div.animate({width:'290px',opacity:'0.9'},"slow");
div.animate({height:'290px',opacity:'0.5'},"slow");
div.animate({width:'290px',opacity:'0.7'},"slow");
});
});
</script>
</head>
<body>
<button>ANIMASYONU BASLAT</button>
<div style="background:#98bf21;height:90px;width:90px;position:absolute;">
</div>
</body>
</html>
Animasyonu başlattığınızda önce 290px aşağı doğru daha sonra da 290px sağa doğru genişlediğini göreceksiniz.
jQuery Efekt Tablosu
Aşağıdaki tablo, animasyon efektleri üretmek için kullanılabilecek jQuery metodlarının bir listesini sunuyor:
| Özellik | Açıklama |
| animate() | Seçilmiş elemanlarla bir animasyonu (canlandırma) gerçekleştirir. |
| clearQueue() | Seçilmiş elemanlardan tüm kalan kuyruk fonksiyonlarını siler. |
| delay() | Seçilen elemanlarda tüm kuyruk fonksiyonları için bir gecikme koyar. |
| dequeue() | Kuyrukta bir sonraki fonksiyonu siler ve fonksiyonu icra eder. |
| fadeIn() | Seçilen elemanları görünür hale getirir. |
| fadeOut() | Seçilen elemanları görünmez hale getirir. |
| fadeTo() | Verilen bir saydamlığa göre fadein/fadeout fonksiyonlarını çalıştırır. |
| fadeToggle() | fadeIn() ve fadeOut() metotlarını peşi sıra uygular. |
| finish() | Seçilen elemanlar için, tüm kuyruk animasyonlarını durdurur uzaklaştırır ve tamamlar. |
| hide() | Seçilen elemanları gizler. |
| queue() | Seçilen elemanlardaki kuyruk fonksiyonlarını görüntüler. |
| show() | Seçilen elemanları gösterir. |
| slideDown() | Seçilen elemanları yukarıdan aşağıya görüntüler. |
| slideToggle() | slideUp() ve slideDown() metotlarını birbirinin peşisıra uygular. |
| slideUp() | Seçilen elemanları gizler. |
| stop() | Seçilen elemanlar için o anda çalışan animasyonu durdurur. |
| toggle() | hide() ve show() metotlarını peşisıra uygular. |
jQuery stop() Metodu
jQuery stop() metodu, bir animasyon ya da efekti tamamlanmadan önce durdurur.
Yazılış biçimi:
$(selector).stop(stopAll,goToEnd);
Kullanımı isteğe bağlı olan stopAll parametresi, animasyon kuyruğunun temizlenip temizlenmeyeceğini belirler. Öntanımlı değer false'tur; bunun anlamı sadece aktif animasyonun durdurulacağıdır. Daha sonra kuyruktaki animasyonlar icra edilebilir. Kullanımı isteğe bağlı olan gotoEnd parametresi de mevcut animasyonun hemen tamamlanıp tamamlanmayacağını belirler. Öntanımlı değer false'tur.
Şimdi sırada basit bir örnek var:
$("#stop").click(function(){
$("#panel").stop();
});
Yorumlar
Yorum Gönder