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

[Christie]

Me gustaría que cuando el puntero se posara sobre este div:
<div onmouseover="transition-bar-pp-over();"
onmouseout="transition-bar-pp-out();"
">

Este otro div apareciera, respondiéndo al script que se encuentra más abajo y que supongo está errado ya que no me funciona.

<div id="bar-edit-pp" style="
width: 840px;
height: 40px;
display: none;
\">

<script type="text/javascript">
transition-bar-pp-over {
document.getElementById('bar-edit-pp').style.transition="visibility 2s";
document.getElementById('bar-edit-pp').style.visibility:hover="visible";
}
transition-bar-pp-out {
document.getElementById('bar-edit-pp').style.transition="visibility 2s";
document.getElementById('bar-edit-pp').style.visibility="none";
}
</script>

[MCF]

es mas facil si usas animate de css, busca un poco al respecto ya q así solo tendrías q cambiar la clase y ya

[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

[pzin]

No se puede animar la propiedad display de CSS, si acaso abría que usar opacity.

Propiedades que se pueden animar con CSS: https://developer.mozilla.org/en-US/...ted_properties

[Alexis88]

Revisando la documentación que proporcionó pzin, acabo de comprobar que es tal como lo dice. No hay duda de que equivocándose -y leyendo el manual- se aprende.

Aplicando lo aprendido, con CSS:

Código CSS:

#div2{
    opacity: 1;
    transition: opacity .8s;
}
 
#div1:hover ~ #div2{
    opacity: 0;
}
 

Con JavaScript:

Código Javascript:

var div1 = document.getElementById("div1"),
    div2 = document.getElementById("div2");
 
div1.addEventListener("mouseover", function(){
    div2.style.transition = ".8s";
    div2.style.opacity = 1;
}, false);
div1.addEventListener("mouseout", function(){
    div2.style.transition = ".8s";
    div2.style.opacity = 0;
}, false);
 

Con jQuery (librería de JavaScript), solamente basta que utilices los métodos de efectos que tiene, como los que mencioné en el comentario anterior.

Saludos