JQuery Animasyonlarını Durdurma
Stop metodu ile çalışmakta olan efekt ve animasyonlar durdurulabilir. Kullanımı şu şekildedir.
$(seçici).stop(stopAll,goToEnd);
Parametreler isteğe bağlıdır, kullanılmayabilir.
Stop metodu ile bir animasyon durdurulduğunda, nesne o anki haliyle kalacaktır.
Eğer bir animasyon kuyruğumuz varsa, stop komutu verildiği anda çalışmakta olan animasyon durur ve sıradaki animasyona geçilir.
Stop komutu verildiği anda kuyruktaki tüm animasyonların durdurulması isteniyorsa stopAll parametresine true değeri verilmelidir.
goToEnd parametresine true değeri verildiğinde ise, çalışmakta olan animasyonun en sonuna atlanır. Konu Örnekleri bölümünü inceleyiniz.
stopAll ve goToEnd varsayılan değerleri false’dir.
Stop metodu örnekleri:
$(document).ready(function(){
$("#button1").click(function(){
var nesne = $("#kutu1");
nesne.animate({left: '50px', opacity: '0.5'}, 2000);
nesne.animate({top: '50px', opacity: '1'}, 2000);
nesne.animate({height: '120px', opacity: '0.5'}, 2000);
nesne.animate({width: '120px', opacity: '1'}, 2000);
});
$("#button2").click(function(){
$("#kutu1").stop();
});
$("#button3").click(function(){
$("#kutu1").stop(true);
});
$("#button4").click(function(){
$("#kutu1").stop(true, true);
});
});
Yukarıdaki örnekte button1 animasyonları başlatmakta, diğer butonlar ise durdurmaktadır.
Button2 o an çalışmakta olan animasyonu durdurur.
Button3 tüm animasyonların oynamasını durdurur.
Button4 tüm animasyonları durdurup, o anki animasyonun sonuna atlatır.
Konu Örnekleri kısmında Kendin Dene butonuna tıkla ve kodları değiştirerek daha iyi anla...
jquery stop animation, stop current animation and go to end of animation, animasyonu durdurma, efekti durdurma iptal etme, animasyonun sonuna atlama
KONU İLE İLGİLİ ÖRNEKLER
|
Örnek: Yeni animasyon başlamadan önce, o an çalışmakta olan animasyonları durdurma, bu sayede animasyonların üst üste çalışmasının önüne geçme
|
Kendin Dene
|
Hazırlayan: Deniz DENİZ
Bu örnekte hover metodu kullanılarak fare butonların üzerine gelindiğinde genişlemesi, fare çekildiğinde ise tekrar daralması sağlanmıştır.
Her iki olay gerçekleştiğinde de öncelikle stop komutu kullanılarak daha önce başlamış olan animasyonlar durdurulmuştur. Aksi halde fare ile arka arkaya butonların üzerine gelindiğinde animasyonlar tekrarlanıp duracaktır.
Stop komutlarını kaldırarak farkı görebilirsiniz.
Kodları Dene butonuna tıklayarak örneğin kodlarını inceleyebilir ve değiştirebilirsin.
Yukarıdaki örnekte button1 animasyonları başlatmakta, diğer butonlar ise durdurmaktadır.
Button2 o an çalışmakta olan animasyonu durdurur.
Button3 tüm animasyonların oynamasını durdurur.
Button4 tüm animasyonları durdurup, o anki animasyonun sonuna atlatır.
7192 kez okundu.