Öncelikle sayfanda jquery olup olmadığından emin ol. Eğer yoksa aşağıdaki bağlantıdan jquery indir ve sayfana ekle.

Not: Wordpress blog kullanıyorsan ve kullandığın temada veya eklentilerde jquery efektler varsa çok büyük ihtimalle jquery ekli olacaktır.

>> http://jquery.com


Daha sonra yapman gereken iki şey var. Biri javascript kodunu head etikletleri arasına eklemek, ve sayfada belli bir div id ve img class ile ikonlarını tanıtmak.

Javascript ile başlayalım.

Aşağıdaki kodu head kodları arasına ekle:

<script>
/* var J = jQuery.noConflict();
J(document).ready(function(){
J("#sosyalikonlar").delegate("img", "mouseover mouseout", function(e) {
if (e.type == 'mouseover') {
J("#sosyalikonlar a img").not(this).dequeue().animate({opacity: "0.3"}, 300);
} else {
J("#sosyalikonlar a img").not(this).dequeue().animate({opacity: "1"}, 300);
}
});
});
/* ]]> */
</script>


Daha sonra ikonları aşağıdaki gibi sayfada eklemek istediğin yere ekleyebilirsin:


Twitter
Facebook
Flickr
Tumblr
Vimeo


Yine lazım olur diye yapılmış örneğinide hazırladım. Aşağıdaki adresten indirebilirsin:

>> http://hotfile.com/dl/125374925/494d9f6/jquery-opacity-wmaraci-com.rar.html