Jquery animate nasıl kullanılır?

3

Jquery ile animasyon (animate) nasıl yapılır ?

ergin ergin (2515)
7 yıl önce sordu

    Toplam 1 Cevap


    3

    Jquery animate bir jquery metodudur. Jquery animate metodu ile HTML etiketlerinin CSS özelliklerini zamana bağlı olarak rahatlıkla değiştirebilmenize olanak sağlayan bir metoddur.

    Jquery animate metodu 4 kısımdan oluşmaktadır:

    .animate(özellikler, [süre(duration)], [görsellik(easing)], [tamamlandığında yapılacaklar(complete)]);

    Özellikler: Animasyon ile değişecek olan CSS özellikleri (renk, genişlik, yükseklik, font boyutu v.b.)
    Süre (duration): Animasyon süresini belirler. Süre milisaniye cinsinden girilir. 1 Saniye için 1000 yazılır.
    Görsellik (easing): animasyon esnasında hangi görsel fonksiyonun kullanılacağı belirtilir.
    Tamamlandığında Yapılacaklar (complete): Animasyon tamamlandığında yapılacak olanlar bir fonksiyon içerisinde belirtilir.

    Kullanımı ile ilgili bir örnek vermek gerekirse:

    ID'si animasyon olan bir DIV etiketimiz olsun ve bu etiketin width değerinin animasyon sonunda 250px height değerinin ise 500px olmasını istediğimizi varsayalım. Animasyonun 3 sn. içinde bitmesini istiyoruz. Width değerinin görsellik efekti easeInSine ve height değerinin görsellik efekti easeInExpo olsun. Animasyon tamamlandığında ise "Animasyon Tamamlandı" şeklinde bir mesaj versin.

    $('#animasyon').animate({
    width: '250px',
    height: '500px'
    }, {
    duration: 3000,
    specialEasing: {
    width: 'easelnSine',
    height: 'easelnExpo'
    },
    complete: function() {
    alert('Animasyon Tamamlandı');
    }
    });

     

    Aşağıdaki görselleştirme efektlerini (easing) kullanarak çeşitli animasyonlar oluşturabilirsiniz.

    jswing
    def
    easeInQuad
    easeOutQuad
    easeInOutQuad
    easeInCubic
    easeOutCubic
    easeInOutCubic
    easeInQuart
    easeOutQuart
    easeInOutQuart
    easeInQuint
    easeOutQuint
    easeInOutQuint
    easeInSine
    easeOutSine
    easeInOutSine
    easeInExpo
    easeOutExpo
    easeInOutExpo
    easeInCirc
    easeOutCirc
    easeInOutCirc
    easeInElastic
    easeOutElastic
    easeInOutElastic
    easeInBack
    easeOutBack
    easeInOutBack
    easeInBounce
    easeOutBounce
    easeInOutBounce

    ergin ergin (2515)
    7 yıl önce cevaplandı

      üyelik gerektirir

      Cevap yazabilmek için üye girişi yapmalısınız.

      Eğer uzmanim.net üyesiyseniz giriş yapabilirsiniz: üye girişi yap
      uzmanim.net'e üye olmak çok kolaydır: hemen kayıt ol