Turkcell | Geleceği Yazanlar

302: JQueryBaşlangıç seviyesi derslerde Web Programlama uygulama geliştirme ortamını detaylı olarak inceliyoruz.

Tüm Eğitimleri Aldın mı? Kendini sınamanın tam zamanı

Haydi Sınava Gir

jQuery Efektleri - Animasyon (Animate)

Kategori : Mobil | Lisans : Creative Commons (by-nc-sa) | En son 12.09.2019 tarihinde güncellendi
Eğitmen : Geleceği Yazanlar Ekibi
Etiketler : web-programlama

jQuery animate() metodu, kullanıcının kendi animasyonlarını sağlamasına olanak verir.

Yazılış biçimi:

$(seçici).animate({parametreler},hız,geriçağırma);

Kullanımı zorunlu olan parametreler, anime edilecek CSS özelliklerini tanımlar. Kullanımı isteğe bağlı olan hız parametresi, efektin süresini belirler; "slow" (yavaş), "fast" (hızlı) ya da milisaniye değerlerinden birini alır. Yine kullanımı isteğe bağlı olan geriçağırma (callback) parametresi, animasyon tamamlandıktan sonra çalıştırılacak bir fonksiyondur.

Aşağıda animate() efektine dair bir örnek HTML5 kodu var. Dikkatle inceleyelim:

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                              $("button").click(function(){
                                                $("div").animate({height: '300px', opacity: '0.4'}, "slow");
                                                });
                              });
            </script>
    </head>
    
    <body>
        <button >BASLA</button>
        
        <div style="background:#92be24;height:50px;width:70px;position:absolute;">
        </div>

    </body>
</html>

Başla düğmesine tıkladığınız zaman yeşil kare uzayacaktır.