• Şuradasınız
  • Anasayfa
  • JQuery
  • Jquery animate Fonksiyonu ile Renk Animasyonu

Jquery animate Fonksiyonu ile Renk Animasyonu

Jquery ve Efekt Fonksiyonları adlı yazımda animate fonksiyonundan bahsetmiştim.

Animate fonksiyonu css özelliklerini kullanarak yeni efektler yaratabilmeniz için oluşturulmuş bir fonksiyondur. Fonksiyonun kullanımını anlatırken, kullanılan css özelliklerinin sayısal değerler olması gerektiğini de söylemiştim.

Jquery UI efekt kütüphanesi ile birlikte sayısal css özelliklerine ek olarak belli başlı css özellikleri de animate fonksiyonu için kullanılabilir hale getirilmiştir. Bu özellikleri aşağıdaki gibi listeleyebiliriz ;

  • backgroundColor
  • borderBottomColor
  • borderLeftColor
  • borderRightColor
  • borderTopColor
  • color
  • outlineColor

Açıklama kısmını fazla uzatmadan işin aslına gelelim, öncelikle kullanacağımız kütüphaneleri sayfamıza entegre edelim.

<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript" src="jquery.effects.core.js"></script>

Artık animate fonksiyonu için yukarıdaki css özellikleri kullanılabilir durumdadır. Öyleyse backgroundColor özelliğini kullanarak jquery ile arkaplan değiştirme örneğini yapalım.

$("a.red").click(function(){
   $("body").animate({ backgroundColor : "#FF0000"  });
});
$("a.blue").click(function(){
   $("body").animate({ backgroundColor : "#0099FF"  });
});
$("a.green").click(function(){
   $("body").animate({ backgroundColor : "#00CC66"  });
});
$("a.yellow").click(function(){
   $("body").animate({ backgroundColor : "#FFFF00"  });
});

Örnekte 4 farklı renkte link bulunmaktadır ve her birine ayrı animate fonksiyonları yüklenmiştir. Herhangi birine tıklandığında kendilerine söylenen renk değişikliğini gerçekleştirecekler.

Örneğin demosunu buradan inceleyebilirsiniz. Ayrıca buradan da indirebilirsiniz.

Benzer Yazılar

Yorumlar

Yorum Yazın

Su elementleri kullanabilirsiniz : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Arama
RSS
Beni yukari isinla