jquery efekt yapımı ve örnekler

Merhabalar, 

Bu yazımda  jqueryde efektlere bakıp ve basit bir örn
ek yapıyor olacağız.

1) Gösterme / Gizleme efektleri

hide : görünür olan bir elementi gizler.( elementin css deki display propertysini none yapar )
show : gizli olan bir elementi gösterir. ( elementin css deki display propertysini block yapar )
toggle : gizli olan elementi gösterir görünür olan elementi gizler

kullanımı : 
$(secilenelement).hide(); // gizle
$(secilenelement).show(); // goster
$(secilenelement).toggle() // gizle ya da göster

hide ve show fonsiyonları ayrıca paremetre olarak milisaniye cinsinden ya da slow,normal ve fast gibi string 
değerde alırlar böylece gizleme/gösterme işlemini
zamana bağlı bir efekt şeklinde yaparlar.

kullanımı : 
$(secilenelement).hide(1000); // 1 saniyede  gürünmez yap .
$(secilenelement).show("slow"); // 600 milisaniyede görünür yap.
$(secilenelement).toggle("slow"); // 600 milisaniyede görünür ya da görünmez yap.

slow -> 600 milisaniye.
normal -> 400 milisaniye.
fast -> 200 milisaniye.
2)  Slayt efekti

.slideDown() //  bu efekt görünmez olan bir elementi yüksekliğini yavaş yavaş artırarak görünür yapar.
.slideUp() //  bu efekt görünmez olan bir elementi yüksekliğini yavaş yavaş azaltarak görünmez yapar.

Kullanımı :
 $(secilenelement).slideUp(1000);
 $(secilenelement).slideDown("slow");
 $(secilenelement).slideToggle(1000);

3) Şeffaflık efekti

.fadeIn() // bir elementin şeffaflığını yavaş yavaş artırarak görünür yapar.
.fadeOut() // bir elementin şeffaflığını yavaş yavaş azaltarak görünmez yapar.
.fadeTo() // bir elementin şeffaflığını yavaş yavaş istenilen değere getirir yani 0-1 rasındaki bir değere.

Kullanımı :
 $(secilenelement).fadeOut(1000);
 $(secilenelement).fadeIn("slow");
 $(secilenelement).fadeTo(1000,0.5);// elementi 1 saniye süre içerinde 0.5 opaclık değerine ulaştırır.

tüm efektler ile ilgili demoları aşağıda görebilirsiniz.
 

 
 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac pellentesque lorem. Curabitur elit nisl, iaculis id mollis id, molestie venenatis turpis. Proin eu est nibh. Cras a orci eros, vel scelerisque lectus. Proin varius fermentum eleifend. Pellentesque egestas tempus mi, in porta metus eleifend in. Pellentesque tincidunt mi nec tortor sagittis a mattis elit blandit. Phasellus vulputate commodo turpis id aliquam. Pellentesque sit amet tincidunt est. Donec velit felis, varius condimentum iaculis at, rutrum id mauris. Fusce sodales rhoncus molestie. Sed lobortis placerat eros at lacinia. Nullam varius velit eget neque aliquet congue. Nunc sit amet nisl at justo pharetra sagittis. Morbi sit amet velit leo, nec feugiat neque. Donec interdum sagittis enim, id gravida lorem luctus eu. Aenean in fringilla odio. Ut eu nulla urna, eu elementum massa.

 Kolay gelsin.

Bunu beğen
Paylaş

Yorumlar
Yorum Yaz
İsim : (*)
E-mail :
Web Adresi:
:
(*)
 
Kapat