Ç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");
});
});
...
