JQUERY BASİT EFEKTLER
.show() : Nesneyi bir kez görünür yapar.
.hide() : Nesneyi bir kez geçici olarak gizler.
.toggle() : Nesneye görünür veya gizlenir efekti verir.
.detay() : Animasyonu veya işlem basamağını belirli bir süre bekletmeye yarar.
.show() KULLANIMI
Sayfa üzerinde tanımlanan nesneyi görünür kılar. Bu işlemi yaparken bilirli bir hız verebiliriz. (slow,normal,fast) değerleri alabilidiği gibi milisaniye cinsindende değerler alabilir. (1000 > bir saniye), Efekt bittiğinde icra edilecek fonksiyonu hız değerinde sonra yapılandıra biliriz.
1 2 3 | $('#calistir').click(function(){ $('#anaDiv').show();//Gizlediğimiz anaDiv'i görünür hale getirdi. }); |
1 2 3 | $('#calistir').click(function(){ $('#anaDiv').show(3000,"easeInBounce",function(){ alert("Element Görünür Hale Geldi");}); }); |
//Gizlediğimiz anaDiv’i görünür hale, üç saniye içerisinde ve easeInBounce efekti ile görünmesni, bu işlemden sonra ise alert ile işlem tamamlandı mesajı vermesini istedik.
.hide() KULLANIMI
1 2 3 | $('#calistir').click(function(){ $('#anaDiv').hide(); }); |
Butona tıkladığımızda display özelliğine block veridiğimiz divimiz gizlendi.
1 2 3 | $('#calistir').click(function(){ $('#anaDiv').hide(3000,"easeInBounce",function(){ alert("Element Görünür Hale Geldi");}); }); |
Display özelliğini block verdiğmiz, anaDiv’i üç saniye içerisinde ve easeInBounce efekti ile gizlenmesini, bu işlemden sonra ise alert ile işlem tamamlandı mesjı vermesini istedik.
.toggle() KULLANIMI
1 2 3 | $('#calistir').click(function(){ $('#anaDiv').toggle("slow"); }); |
Butona tıkladığımızda görünürlüğü kontrol edilen ve görünür olduğu anlaşılan divimiz slow bir şekilde gizlendi.Butona tekrar tıkladımızda ise görünür hale geldi.
1 2 3 | $('#calistir').click(function(){ $('#anaDiv').toggle(3000,"easeOutBounce",function(){ alert("Element Görünür Hale Geldi");}); }); |
Görünür haldeki anaDiv’i üç saniye içerisinde ve easeOutBounce efekti ile gizlendi, bu işlemden sonra ise alert ile işlem tamamlandı mesjı verdi. Butona tekrar tıkladığımızda ise görünür hale geldi.
.delay() KULLANIMI
1 2 3 4 5 | $('#calistir').click(function(){ $('#anaDiv').hide(3000,"easeOutBounce"); $('#anaDiv').delay(2000); $('#anaDiv').show(3000,"easeOutBounce",); }); |
Görünür haldeki divimiz gizlendi. .delay() fonksiyounu ile iki saniye kadar bekledi, tekrar görünür hale geldi.
KAYDIRMA (SLINDING) EFEKTİ
.slideDown() : Belirli bir hızda belirtilen elementi yukardan aşağı doğru açılarak görüntülemeye yarar.
.slideUp() : Belirli bir hızda belirtilen elementi aşağıdan yukarı doğru açılarak görüntülemeye yarar.
.slideToggle() : Belirtilen elemente hem yukarıdan aşağıya hem aşağıdan yukarı açılma veya gizele efekti uygular.
.slideDown() KULLANIMI
1 2 3 | $('#calistir').click(function(){ $('#anaDiv').slideDown(1000); }); |
Bir saniye içerisinde giz olan devimizi yukarıdan aşağı doğru görünür hale getirdik.
.slideUp() KULLANIMI
1 2 3 | $('#calistir').click(function(){ $('#anaDiv').slideUp(1000); }); |
Bir saniye içerisinde görünür olan devimizi aşağıdan aşağı doğru görünür hale getirdik.
1 2 3 4 5 | $('#calistir').click(function(){ $('#anaDiv').slideUp(1000);//Bir saniye içerisinde görünür olan devimizi aşağıdan aşağı doğru görünür hale getirdik. $('#anaDiv').delay(2000);//iki saniye beklettik $('#anaDiv').slideDown(1000);//Bir saniye içerisinde giz olan devimizi yukardan aşağıdoğuru görünür hale getirdik. }); |
.slideToggle() KULLANIMI
1 2 3 4 5 | $('#calistir').click(function(){ $('#anaDiv').slideToggle(1000);//Bir saniye içerisinde görünür olan devimizi aşağıdan aşağı doğru görünür hale getirdik. $('#anaDiv').delay(2000);//iki saniye beklettik $('#anaDiv').slideToggle(1000);//Bir saniye içerisinde giz olan devimizi yukardan aşağıdoğuru görünür hale getirdik. }); |
SÖNME (FADING) EFEKTİ
.fadeIn() : Belirlenen hızda elementin opacity artırılarak göstermeye yarar.
.fadeOut() : Belirlenen hızda elementin şefaflık değeri azaltılarak göstermeye yarar.
.fodeTo() : Belirli bir hızda nesnenin istenilen şeffaflık değerine varmasını sağlar.
.fadeToggle() : fadeIn ve fadeOut özelliklerini birleştirir.
1 2 3 | $('#calistir').click(function(){ $('#anaDiv').fadeIn(5000); }); |
Gizli olan div imiz beş saniye içerisinde şeffaflığı artarak görünür olacak.
.fadeOut() KULLANIMI
1 2 3 | $('#calistir').click(function(){ $('#anaDiv').fadeOut(5000); }); |
Görünür halde olan divimiz beş saniye içerisinde şeffaflığı azalarak gizlenecek.
.fadeTo() KULLANIMI
1 2 3 | $('#calistir').click(function(){ $('#anaDiv').fadeTo("slow",0.40);//Görünür halde olan divimiz butona tıklandığında şefaflığı %40 incek ve duracak. }); |
.fadeToggle() KULLANIMI
1 2 3 | $('#calistir').click(function(){ $('#anaDiv').fadeToggle("normal",0); }); |
Butona ilk tıkladığımızda görünür div imiz kayıp olacak, bir daha tıkladığımızda ise tekarar görünür hale gelecek.
Animasyonlkar ve Diğer Efektler
.animate() : Nesnenin CSS özelliklerini değiştirerek animasyon yapar.
.stop() : Hazırlanan animasyonu durdurur.
.finish() : Mevcut ve kuyruktaki diğer animasyon hareketlerini durdur.
$.fx.off : Sayfadaki bütün animasyonları kapatır.
.queue() : Animasyon efektlerini sırasıyla göstermek için kullanılır.
.dequeue() : Animasyon efektlerinde sıra gözetmeksizin işlem yapar.
.clearQueue() : Henüz bitmemiş animasyon efektlerini sıradan çıkarır.
.animate() KULLANIMI
Bir elementin CSS özelliklerini değiştirerek belirli zamanlarda ve hızda çeşitli animasyonlar yapılabilmektedir.
duration : Animasyonun süresidir. Var sayılan değer 400’dür.
easing : Animasyonun nasıl davranacağını belirler.
queue : Animasyonların çalışma sırasını belirler. Var sayılan değer true’dur.
specialeasing : Ekstra bir salınım swing vermeye yarar.
step : Animasyon sırasında nesne hakkındaki bilgileri adım adım takip eder.
complete : bütün animasyonlar bittiğinde çalışan fonksiyondur.
done : İlgili animasyon bittiğinde çalışan fonksiyondur.
fail : Animasyonda hata meydana geldiğinde çalışan fonksiyondur.
always : Animasyon bittiğinde ya da bitmeden durduğunda çalışan fonksiyondur.
1 2 3 4 5 6 7 8 | $('#calistir').click(function(){ $('#anaDiv').animate({ //özellik : deger, //özellik : deger, },duration,easing,function(){ //yapılacak iş. }); |
1 2 3 4 5 6 7 8 | $('#calistir').click(function(){ $("#anaDiv").animate({ paddingLeft:"300px", width:"100%", height:400, fontSize:"24px" },2000); }); |
1 2 3 4 5 6 7 8 | $('#calistir').click(function(){ $('#anaDiv').animate({ width:'+=300', height:"-=10", opacity:0.4, paddingLeft:50 },5000,"easeInElastic"); }); |
Nesnenin genişliğni 300px artırıp, yüksekliğini 10px azaltacak. Aynı zamanda şeffaflığı 0.4 yapacak ve soldan 50 px lik bir iç boşluk verecek. Tabi bu işlemlerin hepsini 5 saniye içerisinde gerçekleştirilecek.
1 2 3 4 5 6 7 8 9 10 11 12 | $('#calistir').mouseenter(function(){ $('#anaDiv').animate({ width:"70%", height:400, border:"1px solid green" },{ duration:5000, easing:"easeInBounce", complete:function(){alert("Animasyon Bitti") } }); }); |
1 2 3 4 5 | sira=true; $("#asagi").mouseenter(function(){$('#anaDiv').animate({ marginTop:"+=250"},{duration:3000,queue:sira});}); $("#yukari").mouseenter(function(){$('#anaDiv').animate({ marginTop:"-=250"},{duration:3000,queue:sira});}); $("#sag").mouseenter(function(){$('#anaDiv').animate({ marginLeft:"+=250"},{duration:3000,queue:sira});}); $("#sol").mouseenter(function(){$('#anaDiv').animate({ marginLeft:"-=250"},{duration:3000,queue:sira});}); |
.stop() KULLANIMI
1 2 3 4 5 6 7 8 9 | $("#calistir").mousedown(function(){ $("#anaDiv").animate({ marginLeft:"+=300", marginTop:"+=300" },4000,"easeInSine"); }); $("#durdur").mousedown(function(){ $("#anaDiv").stop(); }); |
#durdur id’li butona tıklandığında animasyonu durdurur.
dequeue() KULLANIMI
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $("#calistir").mousedown(function(){ $("#anaDiv").animate({ marginLeft:"+=100", marginTop:"+=100" },4000,"easeInSine").animate({ opacity:0.5, marginLeft:"-=100", marginTop:"-=100" },3000,"easeInOutBack").queue(function(){ alert(":)"); $(this).dequeue();//Arkadan gelen animasyonları çalıştırır. }).animate({paddingLeft:200, marginTop:"+=100"},3000).animate({ width:"100%"},1000); }); |
.clearQueue() KULLANIMI
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $("#calistir").mousedown(function(){ $("#anaDiv").animate({ marginLeft:"+=300", marginTop:"+=300" },4000,"easeInSine").animate({ marginLeft:"-=300", marginTop:"-=300" },4000,"easeInSine").animate({ width:"100%" },4000,"easeInSine"); }); $("#durdur").mousedown(function(){ var anaD=$("#anaDiv"); anaD.clearQueue();}); |
Dur butonuna tıklandığında çalışan animasyondan sonraki animasyon çalışmayacak ve sıfırlanacak.