Web Programlama

Web Programlama

DERS PROGRAMI
Web Programlama 302 Ders Programı

jQuery animate() – Bağıl (Relative) Değerler

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

+= ya da -= sembolleri yardımıyla parametre değerleri o andaki değerlerine ekleme ya da çıkarma yapılarak bağıl biçimde tanımlanabilir.

Aşağıdaki jQuery kodu bununla ilişkilidir:

<!DOCTYPE html>
<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
                          $("button").click(function(){
                                            $("div").animate({ 
                                                left:'240px',
                                                opacity:'+=0.1',
                                                height:'+=30px',
                                                width:'+=15px'
                                                             });
                                            });
                          });
    </script>
    </head>
    
    <body>
        <button>BASLA</button>
        <p></p>
        <div style="background:#56aaff;height:110px;width:80px;position:absolute;">
        </div>
        
    </body>
</html>

BAŞLA düğmesine bastığınızda nesne sağa doğru, aşağıdaki şekilde görülen noktaya kadar büyüyerek hareket edecektir. Bundan sonra BAŞLA düğmesine her tıkladığınızda nesnenin büyüdüğünü gözleyeceksiniz.