Arkadaşlar css, bir web sayfasının tasarımını oluşturan bildirimlerin yazıldığı bir dosya türüdür. Örneğin sayfada bulunan resmin konumu, css dosyasında bildirilir. Eğer buraya erişip, resmin bulunduğu pozisyonun yerini değiştirebilirseniz, fotoğrafın yeri de değişmiş olur. Öyle ise, fotoğrafa hareket kazandırmamız mümkündür..

Peki bunu nasıl yapabiliriz?

Her zamanki gibi document.ready metodumuzun içerisine, bir onclick aktivitesi koyuyuoruz. Buton tıklandığında, bu aktivite tetiklenmeli. Aktivite yani fonksiyonumuzun içerisine de JQuery ile, nesneye hareket verebilmek için JQuery fonksiyonlarımızın bildirimini yapıyoruz. Daha sonra da body etiketleri arasında bulunan, butonlar tarafından bu metodu çağırma işlemini gerçekleştirince, istediğimiz animasyonu oluşturmuş oluyoruz… Buyrun kaynak kod, burada…

Not: JQuery kütüphanesini eklemeyi unutmayın..

  1. <html>
  2. <head>
  3. <script type="text/javascript" src="jquery.js"></script>
  4. <script type="text/javascript">
  5. $(document).ready(function(){
  6.   $("button").click(function(){
  7.     $("div").animate({left:"300px"},"slow");
  8.     $("div").animate({fontSize:"2em"},"slow");
  9.   });
  10. });
  11. </script>
  12. </head>
  13. <body>
  14.  
  15. <button>Animasyonu Çalıştır</button>
  16. <br /><br />
  17. <div style="background:red;height:50px;width:130px;position:relative">Hareket</div>
  18. </body>
  19. </html>


*** *** KANALIMIZA ABONE OLMAYI UNNUTMAYIN ** ***

*** *** KANALIMIZA ABONE OLMAYI UNNUTMAYIN *** ***