• Değerli kullanıcılarımız, eğer forumda açılmasını istediğiniz kategoriler varsa lütfen Görüş ve Önerileriniz kısmına bunu konu açarak belirtin.

JQuery Animate Metodu ile Birden Fazla Özelliğe Müdahale Etme - JQuery Dersleri

EmirhanBvk

Hile Bizim İşimiz :)
ONAYLI UYE
STANDART UYE
Katılım
15 Ara 2019
Mesajlar
11
Beğeniler
1
Puanları
3
Bir objenin birden fazla özelliğini aynı anda değiştirme işlemi uygulayarak animasyon yaratmak da mümkün.
Aşağıda vermiş olduğum örnek içerisinde buton1’e her basılma işlemi gerçekleştiğinde kutu1 50px sağ pozisyona doğru kayma işlemini gerçekleşirecek, genişlik olarak ve yükselik olarak ise 10px artış gösterecektir.
Kod:
$(document).ready(function(){
 
$("#button1").click(function(){
    $("#kutu1").animate({
            left: '+=50px',
            height: '+=10px',
            width: '+=10px',
        });
});
 
});
Css Özelliklerine Show – Hide – Toggle Uygulama

Animate metodu içerisinde Css özelliklerine belirli bir değer girmek yerine Show-hide ve toggle değerleri girilebilir.

Örnek vermek gerekirse width:’hide’ tarzında bir kullanım objesinin genişlik oranı düşerel 0’a kadar düşmesini sağlayabilirsiniz.

Örnek:

$(document).ready(function(){

$("#button1").click(function(){
$("#kutu1").animate({width: 'show'},"slow");
});

$("#button2").click(function(){
$("#kutu1").animate({width: 'hide'},"slow");
});

$("#button3").click(function(){
$("#kutu1").animate({width: 'toggle'},"slow");
});

});

Animasyon Kuyruğu – Animasyonları Sırası ile Oynatma

Birden fazla animasyon birbiri ardınca oynatılmak istendiğinden (bir animasyon bittikten sonra diğeri başlayacak şekilde) aşağıdaki yöntem kullanılabilir.

Örnek:

$(document).ready(function(){

$("#button1").click(function(){
var nesne = $("#kutu1");
nesne.animate({height: '200px', opacity: '0.5'}, "slow");
nesne.animate({width: '200px', opacity: '1'}, "slow");
nesne.animate({height: '100px', opacity: '0.5'}, "slow");
nesne.animate({width: '100px', opacity: '1'}, "slow");
});

});
Bunun yerine aşağıdaki gibi normal kullanmak isterseniz, animasyonlar birbirine eş değer oranla reaksiyon gösterecektir.

$(document).ready(function(){

Kod:
$("#button1").click(function(){
    $("#kutu1").animate({height: '200px', opacity: '0.5'}, "slow");
    $("#kutu1").animate({width: '200px', opacity: '1'}, "slow");
    $("#kutu1").animate({height: '100px', opacity: '0.5'}, "slow");
    $("#kutu1").animate({width: '100px', opacity: '1'}, "slow");
});
 
});

ALINTIDIR!!
 

Şu an konuyu görüntüleyenler (Üye: 0, Misafir: 1)

Üst