Jquery İle Animasyon Yapma

1. Jquery İle Animasyon Yapma

2. 1. Bir Öğeyi Sayfa Boyunca Karşıdan Karşıya Sürüklemek • Bu basit örnekte öğenin üzerine tıklandığında sayfanın bir ucundan diğerine geçiş yapmasını sağlayacağız.  • İmajı hareket ettirmek için “left” özelliğini değiştireceğiz. Ancak öğe mutlaka “top”, “left”, “bottom” ve “right” olarak pozisyonlandırılmalı ve relative(göreceli) olarak ayarlanmalıdır.

3. <scripttype="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js"></script> • <scripttype="text/javascript"> • $(document).ready(function(){ • $("img#resim").click(kaydir) • }); • functionkaydir() • { • $(this).animate( • {left:'800px'},3000 ) • } • </script> • <styletype="text/css"> • #resim • { • position:relative; • left:400px; • top:200px; • right:50px; • bottom:200px; • }

4. İşte burada clickevent (tıklandığında yapılacak olayı) oluşturuyoruz imajımız için. • Ardından da “animate” metodunu kullanıyoruz. • Animasyon metodu için doğru söz dizimi: .animate({property: “value”}, speed, callbackFunction);. • İmajı sağa doğru 3 saniye(veya 3000 milisaniye) içerisinde 400piksel gidecek şekilde ayarladık.

5. 2. Çoklu Animasyon • Şimdi imajımızın sağa doğru kaymasını ve yüksekliği kadar artmasını istiyoruz. Aşağıdaki örnekteki gibi mi yapmalıyız?

6. $(document).ready(function(){ • $("img#resim").click(kaydir) • }); • functionkaydir() • { • $(this).animate( • {left:'800px‘, width:’500px’},3000 ) • } • </script>

7. Cevap: Hayır. Eğer yapmak istediğimiz şeye tekrar göz atarsanız imajın sağa doğru kaymasını ve bu işlemin bitmesinin ardından imajın genişliğinin 300px olmasını sağladık.  • Bu yolla kod doğru bir şekilde yazılmamış oldu, bu kodlarla iki animasyon eş zamanlı olur.  • Yani imaj sağa doğru kayarken, yüksekliği de aynı anda değişir. 

8. Peki biz animasyonlarımıza nasıl “kuyruk”(sıralama) ekleyebiliriz?

9. $(document).ready(function(){ • $("img#resim").click(kaydir) • }); • functionkaydir() • { • $(this).animate( • {left:'800px‘}, 3000 ) • $(this).animate( • {width:‘500px‘}, 3000 ) • } • </script>

10. Şimdi iki animasyonu ayırmış olduk. Öğenin “width” (yükseklik) kısmı “left” işlemi(sağa doğru kayma) tamamlanmadan değişmeyecek.  • Bu “kuyruklu animasyon” veya “zincirleme” olarak adlandırılır.

11. Öğrendiklerimizi Birleştirelim • Bir sonraki örnekte imaja tıklandığında imajı sağa doğru kaydıracağız ve saydamlığını %10′dan %100′e getireceğiz. Animasyon tamamlandığında imajın 3 saniye içerisinde gözden kaybolmasını sağlayacağız.

12. <scripttype="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js"></script> • <scripttype="text/javascript"> • $(document).ready(function(){ • $("img#resim").css("opacity", "0.1"); • $("img#resim").click(animasyon) • }); • function animasyon() • { • $(this).animate • ({left: "400px", opacity: "1"}, 3000, • function() • { • $(this).fadeOut(3000); • } • ) • } • </script> • <styletype="text/css"> • #resim • { • position:relative; • left:800px; • top:200px; • right:50px; • bottom:200px; • } • </style> • </head>

13. Hareketli Buton Hazırlama Ekte mevcut.

14. Div hareketlendirme • <scripttype="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js"></script> • <scripttype="text/javascript" src="../jquery.easing.1.3.js"></script> • <scripttype="text/javascript"> • $(document).ready(function() • { • $('div#buton1').click(olay1) • $('div#buton2').click(olay2) • $('div#buton3').click(olay3) • }); • function olay1() • { • $(this) • .animate({ marginLeft: '500px', opacity: '0.2', },{duration: 'slow',easing: 'easeOutBack'}) • .animate({ marginLeft: '5px', opacity: '1' },{duration: 'slow', easing: 'easeOutBack'}); • }; • function olay2() • { • $(this) • .animate({ marginLeft: '500px', opacity: '0.2' },{duration: 'slow',easing: 'easeOutBounce'}) • .animate({ marginLeft: '5px', opacity: '1' },{duration: 'slow', easing: 'easeOutBounce'}); • }; • function olay3() • { • $(this) • .animate({ marginLeft: '500px', opacity: '0.2', },{duration: 'fast',easing: 'easeOutElastic'}) • .animate({ marginLeft: '5px', opacity: '1' },{duration: 'slow', easing: 'easeOutElastic'}) • .animate({ marginTop: '50px', opacity: '0.5' },2000) • .animate({ marginTop: '5px', opacity: '1' },500); • } • </script> • <styletype="text/css"> • #buton1{ • width:300px; • height:30px; • background:#330099; • color:#FFF; • margin:5px; • cursor:pointer; • } • #buton2{ • width:300px; • height:30px; • background:#330099; • color:#FFF; • margin:5px; • cursor:pointer; • } • #buton3{ • width:300px; • height:30px; • background:#330099; • color:#FFF; • margin:5px; • cursor:pointer; • }

15. .animate({ marginLeft: '500px', opacity: '0.2', },{duration: 'slow',easing: 'easeOutBack'}) • .animate({ marginLeft: '5px', opacity: '1' },{duration: 'slow', easing: 'easeOutBack'}); • 1. Satırda şu adımlar uygulanıyor: • marginLeft: '500px' soldan 500 pixel boşluk bırak yani sağa doğru kaydır. • opacity: '0.2' görünürliğinü kaydırırken %20 ye kadar düşür. • duration: 'slow' gidiş hızın yavaş oldun. (hızlandırmak için fast da yapabilirsiniz.) • easing: 'easeOutBack' geçiş kolaylaştırmasını ayarlıyoruz. Elastik rahat normal vb.. aşağıdaki örnekte inceleyebileceksiniz. • 2. satırda 1. satırdaki gibi git dediğimiz Divimiz e geri gel diyoruz. Ve görünürlüğünü %100 yap.