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.

http://zingocan.com/wp-content/uploads/demo1.png

http://zingocan.com/wp-content/uploads/download.pnghttp://zingocan.com/wp-content/uploads/vdownload1.png

Video içeriği;

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

CSS


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

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

jQuery


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

 </script>

$(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

16 thoughts on “jQuery Video Dersleri-Animate Metodu

  1. Pingback: jQuery Video Dersleri – jQuery Başlangıç | Zingocan- Haber, yorum, slogan, film, kaliteli video,manyak

  2. Pingback: jQuery Video Dersleri – slide, hide ve fade Metodları | Zingocan- Tasarım Blogu, slogan, jquery, tasarım, kaliteli Film Manyak

  3. Pingback: jQuery Dersleri: toggle ve toggleClass Metodları | Zingocan- Tasarım Blogu, slogan, jquery, tasarım, kaliteli Film Manyak

  4. Pingback: jQuery Video Ders: Chaniable – Animate Metodu | Zingocan- Tasarım Blogu, slogan, jquery, web tasarım, webmaster

  5. Pingback: jQuery Video Dersleri-4 Varyasyon oluşturma ve silme | Zingocan- Tasarım Blogu, slogan, jquery, web tasarım, webmaster

  6. Pingback: Görsel jQuery Video Dersleri | Zingocan- Tasarım Blogu, slogan, jquery, web tasarım, webmaster

  7. Pingback: jQuery Slidedown Metodu Kullanımı | Zingocan- Tasarım Blogu, slogan, jquery, web tasarım, webmaster

  8. Pingback: jQuery Dersleri: hover() Metodu | Zingocan- Tasarım Blogu, slogan, jquery, web tasarım, webmaster

  9. Pingback: jQuery Animate Video Dersi | ZingoDers

  10. Pingback: jQuery slide, hide ve fade Metodları | ZingoDers

  11. Pingback: jQuery hover ve chlidren Metodu – Video Ders | Zingocan | jQuery CSS Wordpress Blogu

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>