expandir altura de div onmouseover

Necesito altura en el div 50px por defecto y tiene que cambiarse a 300px onmouseover. Codifiqué debajo de manera para implementarlo.expandir altura de div onmouseover

<style type="text/css"> 
#div1{ 
height:50px; 
overflow:hidden; 
} 
#div1:hover{ 
height:300px; 
} 
</style> 
<body> 
<div id="div1"></div> 
</body>

Este código funciona bien, pero según la propiedad de CSS al desplazarse, su altura cambia inmediatamente. Ahora, necesito una forma elegante como expandir lentamente div onmouseover y contratar onmoveout. ¿Cómo expandir y contraer div en hover?

Fuente

2012-01-20 Mad coder.

Se puede usar jQuery. Usando la función animada. Vea aquí http://api.jquery.com/animate/ – Undefined

O podría usar transiciones CSS (cuando estén disponibles). – biziclop

Hay algunos enfoques - aquí es CSS y jQuery, que debería funcionar en todos los navegadores, no sólo los modernos:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 

    $("#div1").hover(
    //on mouseover 
    function() { 
     $(this).animate({ 
     height: '+=250' //adds 250px 
     }, 'slow' //sets animation speed to slow 
    ); 
    }, 
    //on mouseout 
    function() { 
     $(this).animate({ 
     height: '-=250px' //substracts 250px 
     }, 'slow' 
    ); 
    } 
); 

}); 
</script> 

<style type="text/css"> 
#div1{ 
    height:50px; 
    overflow:hidden; 
    background: red; /* just for demo */ 
} 
</style> 

<body> 
<div id="div1">This is div 1</div> 
</body>

Fuente

2012-01-20 16:57:25 Dustin

Es mejor leer primero la altura original, porque si está cambiando la altura mediante CSS, también necesita volver a editar el JS, que no es muy práctico (por ejemplo, se puede olvidar). – feeela

bien, en ese caso, la "altura: '+ = 250'" solo debe establecerse en "altura: '300px'" – Dustin

Lo siento Dustin, este código no funcionó :( –

En un navegador "moderna", sólo puede aplicar una css transition effect:

#div1 { 
    -moz-transition: 4s all ease-in-out; 
    -ms-transition: 4s all ease-in-out; 
    -webkit-transition: 4s all ease-in-out; 
    -o-transition: 4s all ease-in-out; 
}

Esto se aplicaría un efecto de transición de más de 4 segundos con una ease-in-out de aceleración de Firefox compatibles, es decir, cromo/Safari (WebKit) y navegador de ópera. Leer más:

CSS Transitions

Puede dar un paso adelante y comprobar si el navegador actual soporta transiciones CSS, si está disponible, los utilizan para la animación y si no utilizar un script de animación JavaScript. Ejemplo de ello:

BarFoos animations

Fuente

2012-01-20 16:45:39 jAndy

Usted puede usar jQuery de .animate() Esto actuará sobre cualquier elemento con una clase de "ficha", y volverá el ratón fuera.

$('.tab').hover(function() { 
    $(this).stop() 
    $(this).animate({ 
     height: '+=250' 
     }, 500) 

     }, function() { 
    $(this).stop() 
    $(this).animate({ 
     height: '-=250' 
     }, 500)    
})

Fuente

2012-01-20 16:46:14

Gracias! este código funciona bien, pero se está ejecutando en PageLoad. ¿Cómo ejecutar este código onmouseover? Lamento hacer este tipo de preguntas tontas pero no sé cómo codificar en jQuery. –

Editaré la respuesta. –

¡Lamento decirlo! esto no funcionó Probé como ' 'y como dijiste modifiqué div como

–

#div1{ 
    -webkit-transition: all .3s ease-in-out; 
    -moz-transition: all .3s ease-in-out; 
    -o-transition: all .3s ease-in-out; 
    -ms-transition: all .3s ease-in-out; 
    transition: all .3s ease-in-out; 
}

fácil!

Fuente

2012-01-20 16:46:15

Wow! increíble! pero ¿cómo puedo disminuir la velocidad de deslizamiento? –

aumentar .3s a 1s por ejemplo –

Gracias! he intentado que antes de pedir a usted, pero no se encontró gran diferencia cuando se cambia de 3 a 10 es por eso que pregunté! De todos modos muchas gracias. –

Puede utilizar jQuery .mouseoverhttp://api.jquery.com/mouseover/, .mouseouthttp://api.jquery.com/mouseout/ y .animate para realizar eso.

En el evento .mouseover, animaría la altura para que sea de 300px, y en el evento .mouseout animaría a 50px. Asegúrese de llamar al .stop en el div antes de llamar a animate, de lo contrario, tendrá problemas extraños.

Fuente

2012-01-20 16:46:34 Matthew

Respuesta

Cuestiones relacionadas