jQuery Animasyonlar

Merhaba arkadaşlar. Bu yazımızda jQuery ile Animasyon kullanımını anlatmaya çalışacağım.

jQuery ile kendinize özel animasyonlar oluşturabilirsiniz. Bu sitenizi daha güzel ve kullanışlı bir hale getirecektir.

jQuery Animate Metodu

Animate metodu özel animasyonlar oluşturmak için kullanılır.

Temel sözdizimi şu şekildedir.

$(seçici).animate({parametreler},hız,callback);

Yukardaki kod parçasında parametre özelliği animasyon sırasında çalışacak css kodlarını eklediğimiz alandır.

İsteğe bağlı hız parametresi ise animasyonu hangi hızda çalıştıracağımızı belirlemek için kullanılır. slow, fast ve milisaniye cinsinden sayı değerleri alır.

İsteğe bağlı callback ise bir fonksiyondur. Animasyondan sonra çalışmasını istediğimiz bir şey varsa oraya yazarız.

Şimdi bir örnek yapalım.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left'250px'});
  });
});
</script> 
</head>
<body>
<button>Animasyonu Başlat</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>

Yukarıdaki örnekte div içerisine bir kutu oluşturduk ve bazı css tanımlamaları yaptık. Animasyonu başlat butonuna tıkladığımızda o kutu 250 pixel sağa kayacaktır.

Animasyonları Kullanarak Elementin Birden Fazla Özelliğini Değiştirme

Animasyon kullanırken birden fazla özellik ekleyebiliriz. Mesela bir kutu olduğunu varsayalım bu kutuyu animasyon özelliği ile aynı anda 250 pixel sağa kaydırıp boyutunu %10 artırabiliriz.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left'250px',
      opacity'0.5',
      height'250px',
      width'250px'
    });
  });
});
</script> 
</head>
<body>
<button>Animasyonu Başlat</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>

Animasyonlarda Göreceli Değer Kullanma

Göreceli değerleri tanımlamak da mümkündür (bu durumda değer, elemanın mevcut değerine göredir). Bu, değerin önüne += veya -= koyarak yapılır.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left'250px',
      height'+=150px',
      width'+=150px'
    });
  });
});
</script> 
</head>
<body>
<button>Animasyonu Başlat</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>

Yukardaki örnekte butona her tıkladığınızda animasyondaki kutunun genişlik ve yükseklik değeri 150 pixel artacaktır.

Animasyonlarda Önceden Tanımlanmış Değerleri Kullanma

Bir animasyonun özelliğini show, hide ve toggle olarak belirleyebiliriz.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      height'toggle'
    });
  });
});
</script> 
</head>
<body> 
<button>Animasyonu Başlat</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>

Animasyonlarda Kuyruk İşlemi

jQuery ile animasyon kullanmanın en eğlenceli tarafı budur. Zincirleme de diyebileceğimiz bu olayda animasyona sırayla işlem yaptırabiliriz. Mesela birinci işlemde elementin boyunu 150 pixel artırıp ikinci işlemde ise bunu 250 pixel sağa ya da sola kaydırmak gibi.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div = $("div");
    div.animate({height: '300px', opacity: '0.4'}, "slow");
    div.animate({width: '300px', opacity: '0.8'}, "slow");
    div.animate({height: '100px', opacity: '0.4'}, "slow");
    div.animate({width: '100px', opacity: '0.8'}, "slow");
  });
});
</script> 
</head>
<body>
<button>Animasyonu Başlat</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>


Animasyon konusunda anlatacaklarım bu kadar. Hayal gücünüzü kullanarak çok güzel animasyonlar yapabilirsiniz.

Esen Kalın.

YAZAR HAKKINDA

26 Yaşında. Araştırmayı seven, bir şeyler öğretmeye meraklı bir Bilgisayar Mühendisi

0 YORUM

Bu konuya henüz yorum yapılmamış

Yorum Yap

@COPYRIGHT KodlamakLazım Tüm Hakları Saklıdır.