¿Efecto transition (CSS) en un script de onmouseover?

[Alexis88]

Como bien te recomiendan en la respuesta anterior, lo más práctico para estos casos, es realizar el efecto con CSS. Un ejemplo:

Código HTML:

<div id="div1">Hola</div>
<div id="div2">Adiós</div>
 

Código CSS:

#div2{
  transition: display .8s;
  display: none;
}
 
#div1:hover ~ #div2{
  display: block;
}
 

Con esto, ocultas a div2 desde el inicio y cada vez que poses el puntero del mouse sobre el div1, se mostrará el div2. La transición a aplicarse, se indica en las propiedades de div2.

Sin embargo, si insistes en hacerlo con JavaScript, esta sería una forma:

Código Javascript:

var div1 = document.getElementById("div1"),
    div2 = document.getElementById("div2");
 
div1
    .addEventListener("mouseover", function(){
        div2.style.transition = ".8s";
        div2.style.display = "block";
    }, false)
    .addEventListener("mouseout", function(){
        div2.style.transition = ".8s";
        div2.style.display = "none";
    }, false);
 

Y utilizando los métodos fadeIn y fadeOut de jQuery:

Código Javascript:

$("#div1").hover(function(){
    $("#div2").fadeIn(800);
}, function(){
    $("#div2").fadeOut(800);
});
 

Si deseas hacer este tipo de efectos con JavaScript, te recomiendo utilizar los métodos de jQuery, pues así como los que muestro en el ejemplo, tiene otros muy buenos: http://api.jquery.com/category/effects/

Saludos