Turkcell | Geleceği Yazanlar

Web Programlama

Web Programlama

DERS PROGRAMI
302: JQuery Ders Programı

jQuery stop() Metodu

Lisans: Creative Commos (by-nc-sa)12.09.2019 tarihinde güncellendi
Bakabileceğiniz Etiketler:Eğitmen: Geleceği Yazanlar Ekibi

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.