Bu yazımızda jQuery stop metodunun kullanımını göreceğiz. Bazı durumlarda animasyonu belli bir kısmına geldiğinde durdurmak isteyebiliriz.
Stop metodu animasyonları durdurmak yani bitirmek için kullanılır. Stop metodu jQuery'nin desteklediği tüm animasyonlarda çalışır.
Temel sözdizimi şu şekildedir.
$(seçici).stop(stopAll,goToEnd);
İsteğe bağlı stopAll parametresi, animasyon kuyruğunun da temizlenip temizlenmeyeceğini belirtir. Varsayılan yanlıştır; bu, yalnızca etkin animasyonun durdurulacağı ve daha sonra sıraya alınmış animasyonların gerçekleştirilmesine izin verileceği anlamına gelir.
İsteğe bağlı goToEnd parametresi, geçerli animasyonun hemen tamamlanıp tamamlanmayacağını belirtir. Varsayılan değeri false'dir.
Bu nedenle, varsayılan olarak stop() yöntemi, seçili öğe üzerinde gerçekleştirilen geçerli animasyonu bitirir.
Aşağıdaki örnekte parametresiz stop kullanımını görebilirsiniz
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.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">Stop sliding</button>
<div id="flip">Tıkla ve gör</div>
<div id="panel">Kodlamaklazım!</div>
</body>
</html>
Aşağıdaki detaylı örneği inceleyelim.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.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şlat</button>
<button id="stop">Durdur</button>
<button id="stop2">Hepsini Durdur</button>
<button id="stop3">Dur ama bitir</button>
<p>Başlat Butonu animasyonu başlatır</p>
<p>"Durdur" düğmesi, mevcut aktif animasyonu durdurur, ancak sıraya alınmış animasyonların daha sonra gerçekleştirilmesine izin verir.</p>
<p>"Tümünü durdur" düğmesi, geçerli etkin animasyonu durdurur ve animasyon kuyruğu; böylece öğedeki tüm animasyonlar durdurulur</p>
<p>"Dur ama bitir", geçerli aktif animasyonda hızla ilerler ve ardından durur.</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>
26 Yaşında. Araştırmayı seven, bir şeyler öğretmeye meraklı bir Bilgisayar Mühendisi
