jQuery Video Dersleri-Animate Metodu

Daha önceki derslerimizde, jquery başlangıç ve jquery ile fade, slide, hide-show metodlarını nasıl kullanabileceğimiz hakkında 2 video uygulamasını görmüştük.Bu dersimizde ise jQuery ‘de animate metodu ile objelere hareket kazandırma ve slayt oluşturmak için ön başlangıç yaptık..jQuery Daha kaliteli video için videoyu indiriniz.

Video içeriği;

Dersimizde bulunan index.html dosyasında yaptığımız bazı değişikliklerden bahsedecek olursak;

CSS

[php]

<style type="text/css">
#kutu
{
background: orange;
width: 300px;
height: 300px;
position: relative;
}
</style>

[/php]

position: relative; kodu belirlediğimiz katmanın posizyonunu bizim vereceğimiz bir bildirim ile konum değişikliliğine girebilmesini sağlar

jQuery

[php]

<script type="text/javascript">
$(function() {
$(‘#kutu’).click(function() {
$(this).animate({
"left" : "300px"
});
$(this).animate({
"width" : "100px",
"height" : "50px"
});
});
});

</script>

[/php]

$(this).animate({ ile daha önce kullandığımız fonksiyondaki elemanımızın sürekliliğini devam ettirdiğimizi ve aynı elamanla yeni bir fonksiyon oluşturduğumuzu belirttik.

Daha sonra animate fonksiyonu ile “kutu” olarak belirlediğimiz katrmana bir fonksiyon atadık ve ;

“left” : “300px”

“width” : “100px”,
“height” : “50px”

Komutları ile sayfa boyunca 300px sürüklenmesini, genişlik ayarının 100px‘e düşmesini ve yüksekliğininde 50px‘e düşmesini $(‘#kutu’).click(function() { fonksiyonu ile “kutu” katmanına tıklanması ile sağladık.

Diğer Video Dersleri

Ders 1- jQuery Başlangıç

Ders 2 -Fade, Slide hide -show Metodları

Ders 3 -Animate Metodu

Ders 4 – Varyasyon Oluşturma

Ders 5 -  toggle ve toggleClass Metodları

Ders 6 -  jQuery Slidedown Metodu Kullanımı

Ders 7 -  jQuery Dersleri: hover() Metodu

Ders 8 -  jQuery hover ve chlidren Metodu

Ders 9 – Chaniable – Animate Metodu ile Nesne Hareketlendirme