Jquery Ders-20 .stop() Kullanımı
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery Ders-20 .stop() Kullanımı

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(3451)
RAPOR ET
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.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol