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 animate() – Bağıl (Relative) Değerler

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

+= 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.