Loading...

jqueryefekt


Jquery ile Özel Efekt OLuşturma

Seviyesi : Başlangıc Eklenme : 30 Ekim Cuma 2009 15:07

Jquery javascript kütüphanesinde hide(), show(), fadeIn() ,FadeOut() gibi bir çok efekt fonksiyonu bulunmakta.Bu fonksiyonların temelde yaptığı iş seçili nesnenin css özelliklerini zamana göre değiştirmek.Bizde bir nesnenin css özelliklerini değiştirerek kendi özel efektimizi oluşturabiliriz.İşte burada animate() fonksiyonu devreye giriyor.Bu fonksiyon sayfamızdaki bir nesnenin css özelliklerini belli bir zamana bağlı olarak değiştirme işlevine sahip.Burada dikkat edilmesi gereken nokta değiştirilecek css özelliklerinin arttırılabilir bir değere sahip olması.Örneğin font-family="tahoma" özelliği sayısal bir değer olmadığı için animate() fonksiyonunda kullanılamaz, fakat height="10px' gibi bir değer kullanılabilir.
Yukarıda anlatılanları bir örnek kod ile açıklayalım.

 
$('div#metin').animate(
{

left:'100px',
top:'100px',
fontSize:'100px'

},5000);


Bu örnekte id değeri nesne olan bir div objesinin left,top ve fontSize css değerlerini,5000 miliysaniyelik bir süre zarfı içerisinde değiştirmiş olduk.ve böylelilkle kendi efektimizi oluşturmuş olduk.

Bu efektimizin 5000 miliysaniyelik süre içerisinde çalışmayı durdurumasını isteyebiliriz.Böyle bir durumda animate() fonksiyonunun çalışmasını durdurmak için stop() fonksiyonunu kullanmamız gerekir.Stop() fonksiyonunu şu şekilde kullanabiliriz.
 
$('div#metin').stop()

 
 

Örnek Sokak 1a, 12345 Örnekşehir
+90 1234567890