Web Programlama

jQuery Efektleri - Animasyon (Animate)

Lisans: Creative Commons 26.11.2020 tarihinde güncellendi

Bakabileceğiniz Etiketler: Eğitmen: Geleceği Yazanlar Ekibi

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.

Sınava Gir