Jquery eğitim serimize devam ediyoruz.Bu derste
.stop() methodunu işleyeceğiz.Geçen ders animate() methodunu anlatmıştım.Animasyon yapmak için kullanıyorduk.Ama o methotta bir hata var.Mesela bir mouse üzerine gelince animasyon yaptık.Kaç kere gelirsek üzerine hepsi olur.1 saniyede 10 defa geldik.Hepsini yapar.Bu biraz sorunludur.Çünkü mouse üzerinden gitse bile yapmaya devam eder.
Bu yüzden animate() den önce .stop() koymalıyız.Stop hafızadaki animeteleri siler ve durur.Böylelikle sıradaki animate methodu çalışır.Tekrarlama sorunu olmaz.
<script type="text/javascript">
$(function(){
$(".alan").mouseover(function(){
$(".alan").animate({
width:"300px",
height:"300px"
},300)
});
$(".alan").mouseout(function(){
$(".alan").animate({
width:"100px",
height:"100px"
},300)
});
})
</script>
Bu şekilde bir kullanımda mouse ile üzerine seri şekilde gelin ve hatayı görün.
Genel örnek :
<!DOCTYPE html>
<html lang="en">
<head>
<title>cArleone</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(".alan").mouseover(function(){
$(".alan").stop().animate({
width:"300px",
height:"300px"
},300)
});
$(".alan").mouseout(function(){
$(".alan").stop().animate({
width:"100px",
height:"100px"
},300)
});
})
</script>
<style type="text/css">
.alan{width:100px;height:100px;background:red;}
</style>
</head>
<body>
<div class="alan"></div>
</body>
</html>
Bu şekilde düzgün çalışacaktır.Çünkü stop önceki animasyonları durdurup sadece sıradakini gerçekleştiriyor.