jQuery stop() üsulu

jQuery stop() üsulundan icra olunan animasiya və ya effekti dayandırmaq üçün istifadə olunur.
Bu üsul bütün jQuery effekt funksiyaları, sürüşdürmə, sönmə (fade) və s. üçün tətbiq oluna bilər.

Yazılış forması belədir:
$(selector).stop(stopAll,goToEnd);
 
stopAll parametri onun üçündür ki, əgər bir neçə animasiya ardıcıl icra olunursa, bu parametr ilə hamısını birdən dayandırmaq mümkündür. Varsayılan dəyər false-dir, yəni bu parametri qeyd etməsək, birinci animasiyanı dayandıran kimi, növbəti animasiya icra olunacaq.
goToEnd parametri onun üçündür ki, cari animasiyanı dərhal sonlandırır və dayandırır. Varsayılan dəyər false-dir, yəni bu parametri qeyd etməsək, animasiya sonlanmadan o ankı vəziyyətində dayanacaq.
 
Əvvəlcə parametrsiz bir nümunəyə nəzər yetirək:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery stop</title>
<script type="text/javascript" src="http://xpert.az/engine/classes/js/jquery.js"></script>
<script> 
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideDown(5000);
    });
    $("#stop").click(function(){
        $("#panel").stop();
    });
});
</script>
 
<style> 
#panel, #flip {
    padding: 5px;
    font-size: 18px;
    text-align: center;
    background-color: #555;
    color: white;
    border: solid 1px #666;
    border-radius: 3px;
}

#panel {
    padding: 50px;
    display: none;
}
</style>
</head>
<body>
<button id="stop">Sürüşməni dayandır</button>
    <div id="flip">Panelin açılması üçün buraya klikləyin</div>
    <div id="panel">Salam hər kəsə!</div>
</body>
</html>
Nəticəni görmək üçün klikləyin.
 
Nəticədən göründüyü kimi, əvvəlcə paneli açmaq üçün bölməyə klikləyib, ardınca "Sürüşməni dayandır" düyməsinə klikləsək, sürüşmə o an dayanacaqdır.
 
Bu dəfə isə parametrlərin də iştirak etdiyi, nisbətən mürəkkəb nümunəyə baxaq:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery stop</title>
<script type="text/javascript" src="http://xpert.az/engine/classes/js/jquery.js"></script>
<script> 
$(document).ready(function(){
    $("#start").click(function(){
        $("div").animate({left: '100px'}, 5000);
        $("div").animate({fontSize: '3em'}, 5000);
    });
  
    $("#stop").click(function(){
        $("div").stop();
    });

    $("#stop2").click(function(){
        $("div").stop(true);
    });


    $("#stop3").click(function(){
        $("div").stop(true, true);
    }); 
});
</script> 
</head>
<body>

<button id="start">Başla</button>
<button id="stop">Dayandır</button>
<button id="stop2">Hamısını dayandır</button>
<button id="stop3">Bitir və dayandır</button>

<p>"Başla" düyməsi animasiyanı işə salır</p>
<p>"Dayandır" düyməsi cari animasiyanı dayandırır. Ancaq növbəti animasiya (varsa) yenidən "dayandır" əmrinə kimi işə düşür.</p>
<p>"Hamısını dayandır" düyməsi bütün animasiyaları dayandırır.</p>
<p>"Bitir və dayandır" düyməsi cari animasiyanı, öz sürəti ilə getməsini gözləmədən sonlandırır və dayandırır</p> 

<div style="background:#98bf21;height:100px;width:200px;position:absolute;">XPERT</div>

</body>
</html>
Nəticəni görmək üçün klikləyin.
 
Nəticədə "Başla", "Dayandır", "Hamısını dayandır", Bitir və dayandır" düymələri ilə yuxarıdakı parametrlər üçün qeyd etdiklərimizi görə bilərsiniz.
"Dayandır" düyməsinə parametrsiz .stop(), "Hamısını dayandır" düyməsinə .stop(true), yəni stopAll üçün true, "Bitir və dayandır" düyməsinə isə .stop(true, true), yəni stopAll və goToEnd üçün true əlavə etdik.
jQuery