Boa noite,
O Hover em si tem dois eventos um quando ele entra no elemento e outra quando sai.
existem dois métodos que estão dentro do hover, mouseenter e o mouseleave você pode utilizá-los separadamente porem é possível usar eles na função hover conforme o código abaixo.
/*
Apenas Complemento
$( selector ).hover( handlerIn, handlerOut )
é uma forma abreviada de:
$( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );
*/
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>hover demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<span id="div1">teste </span>
<script>
$("#div1").hover(
function(){
$(this).fadeTo(1000, 0.0001);
},
function(){
$(this).fadeTo(3000, 1);
}
);
</script>
</body>
</html>
Existem vários Fade para o controle
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
Não vamos nos apegar a todos, alguns são até utilizados nos exemplos do link que você postou.
Usei apenas o fadeTo nele consigo controlar o tempo e opacidade do elemento.
Espero ter ajudado de alguma forma.