Web Programlama

Web Programlama

DERS PROGRAMI
Web Programlama 302 Ders Programı
Sınava Gir

jQuery animate() Metodu - Çoklu Özelliklerin İşlenmesi

Lisans: Creative Commons 26.11.2020 tarihinde güncellendi
Bakabileceğiniz Etiketler: Eğitmen: Geleceği Yazanlar Ekibi

Aynı anda çok sayıda özellik animasyona katılabilir. Aşağıdaki örnekte konum, büyüklük ve saydamlık değiştirilerek dikdörtgen şeklindeki nesne BAŞLA düğmesiyle hareket ettirilmektedir:

Örneğimizi 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({
            left: '250px',
            opacity: '0.5',
            height: '150px',
            width: '150px'
                                                                 });
                                                });
                              });
            </script>
    </head>
    
    <body>
        <button>BASLA</button>
        <div style="background:#56aaaa;height:110px;width:80px;position:absolute;"></div>
        
    </body>
</html>

BAŞLA düğmesine tıklanınca dikdörtgen büyüyecek ve sağa doğru hareket edecektir.

Bir özelliğin animasyon değerini "show", "hide" ya da "toggle" olarak tanımlayabilirsiniz. Yukarıda verdiğimiz kodda,

$("div").animate({
     left:'240px',
     opacity:'+=0.1',
     height:'toggle',
     width:'+=15px'
});

atamalarını yaparak kodu çalıştırınız. BAŞLA düğmesine tıklayınca nesne aşağıdaki gibi hareket ederek kaybolacaktır. Tekrar BAŞLA düğmesine tıkladığınızda ise yeniden görünür hale gelecektir.

Sınava Gir