JQuery Animasyonu Durdurma

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.

Örnek: JQuery Stop Metodu Kullanımı Kendin Dene

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.


YORUMLAR




5428  kez okundu.

Online Kullanıcı Sayısı 711



jquery-animasyonu-durdurma