JQUERY ANİMASYON ve BASİT EFEKTLER

JQUERY ANİMASYON ve BASİT EFEKTLER

Tarhi : 16-06-2017 06:32:14 | Yazar : ÇAĞLAR BOSTANCI

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.

//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

Butona tıkladığımızda display özelliğine block veridiğimiz divimiz gizlendi.

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

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.

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

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

Bir saniye içerisinde giz olan devimizi yukarıdan aşağı doğru görünür hale getirdik.

.slideUp() KULLANIMI

Bir saniye içerisinde görünür olan devimizi aşağıdan aşağı doğru görünür hale getirdik.

.slideToggle() KULLANIMI

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.

Gizli olan div imiz beş saniye içerisinde şeffaflığı artarak görünür olacak.

.fadeOut() KULLANIMI

Görünür halde olan divimiz beş saniye içerisinde şeffaflığı azalarak gizlenecek.

.fadeTo() KULLANIMI

.fadeToggle() KULLANIMI

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.

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.

 

.stop() KULLANIMI

#durdur id’li butona tıklandığında animasyonu durdurur.

dequeue() KULLANIMI

.clearQueue() KULLANIMI

Dur butonuna  tıklandığında çalışan animasyondan sonraki animasyon çalışmayacak ve sıfırlanacak.