hovereffect

 

Çoğumuzun kullandığı özellikle portfolyo, reklam ve resimlerde çok kullandığımız efektlerden bir tanesidir mouse hover effect. Jquery yardımıyla fade in/out işlemleri gerçekleştirebiliyoruz. Yapmış olduğum örnekte iki türlü efekt olayını gösterdim.

 

 

Tek resim veya çift resim kullanarak mouse hover effectleri :







Çift resim kullandığımız takdirde scriptimiz :


$(document).ready(function(){
 
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
 
});

Tek resim kullandığımız takdirde scriptimiz ( custom.js ) :

$(function() {
// OPACITY OF BUTTON SET TO 50%
$(".resim_img").css("opacity","0.5");
	
// ON MOUSE OVER
$(".resim_img").hover(function () {
										  
// SET OPACITY TO 100%
$(this).stop().animate({
opacity: 1.0
}, "slow");
},
		
// ON MOUSE OUT
function () {
			
// SET OPACITY BACK TO 50%
$(this).stop().animate({
opacity: 0.5
}, "slow");
});
});

...

 

demo

 

 



Yorum ekle