Turkcell | Geleceği Yazanlar

302: JQueryBaşlangıç seviyesi derslerde Web Programlama uygulama geliştirme ortamını detaylı olarak inceliyoruz.

Tüm Eğitimleri Aldın mı? Kendini sınamanın tam zamanı

Haydi Sınava Gir

jQuery stop() Metodu

Kategori : Mobil | Lisans : Creative Commons (by-nc-sa) | En son 12.09.2019 tarihinde güncellendi
Eğitmen : Geleceği Yazanlar Ekibi
Etiketler : web-programlama

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();
});

Dilerseniz, örnek bir HTML5 kodu içinde bu parametreleri nasıl kullanacağımızı inceleyelim:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                              $("#flip").click(function(){
                                               $("#panel").slideDown(4000);
                                               });
                              $("#stop").click(function(){
                                               $("#panel").stop();
                                               });
                              });
            </script>
 
        <style>
            #panel,#flip
            {
                padding:7px;
                text-align:center;
                background-color:#e5effc;
                border:solid 1px #c3cff3;
            }
        #panel
        {
            padding:60px;
            display:none;
        }
        </style>
    </head>
    <body>
 
<button id="stop">KAYDIRMAYI DURDUR</button>
        <div id="flip">ASAGIYA KAYDIR PANELINI TIKLA</div>
        <div id="panel">Hareketli panel</div>    </body>
</html>

Burada ASAGIYA KAYDIR PANELINI TIKLA düğmesine tıklanınca panel aşağıya doğru hareket edecektir. KAYDIRMAYI DURDUR düğmesine tıkladığınız anda ise panelin hareketi duracaktır.