/*fade animation*/

$(document).ready(function() {
hoverOpacity.init()
});
hoverOpacity = {
init : function(){
$('div.fade').css({
position:"relative",
backgroundPosition:"0px 0px",
cursor:"pointer"
})
$('div.fade').each(function(){
spanFader = document.createElement('span');
myBG = $(this).css("background-image")
$(this).append(spanFader);
myBG = $(this).css("background-image")
spanWidth = $(this).css("width")
spanHeight = $(this).css("height")
$(this).find("span").css({
backgroundImage:myBG,
backgroundPosition:"bottom right",
position:"absolute",
display:"block",
cursor:"pointer",
top:"0px",
left:"0px",
width:spanWidth,
height:spanHeight,
opacity:0,
visibility:"visible"
})
})
$("div.fade").hover(function () {
$(this).find("span").stop()
$(this).find("span:not(:animated)").animate({opacity: 1}, 300)
},
function () {
$(this).find("span").animate({opacity: 0},250)
});
}
}