Estirar div con java

fedefrankk · #1 (**permalink**) 07/06/2012, 16:58

Hola a todos, creo que es sencillo...
tengo un div de ancho 60px y alto 100px, al pasar el maus sobre el que se alargue a por ejemplo 110px, un pequeño efecto, vi varios ejemplos pero son toscos, paso el maus sobre el div y de golpe aparece el div a 110px, queria saber si con java, jquery se puede lograr que de apoco se estire...

Muchas gracias a tdos de antemano
Saludos
Fede

cristian_cena · #2 (**permalink**) 08/06/2012, 00:02

Con java lo dudo, con javascript se puede seguro, y con jquery tambien porque es javascript.
Me da fiaca escribir tu código pero si lo compartes te ayudo a reescribirlo :D la idea es:

Con javascript:
Sobre el elemento html deseado (<div>, etc) pasar una funcion al manejador de eventos (onclick, onmouseover, el que quieras).
Luego en esta función colocas la acción deseada, en tu caso consiste en seleccionar el elemento html y modificarle su estilo css. puedes llevarlo a cabo directamente desde javascript mediante la propiedad style, o mejor aún, cada cosa en su lugar, añadir y quitar una clase (className) al elemento html, clase que ya tendrás escrita en tu hoja de estilos.

Con jquery es mas facil, llamas al metodo cuyo nombre corresponda con el evento deseado y le pasas como argumento una función, anónima o declarada (como el caso anterior) en la que procedes a hacer lo mismo usando addClass o removeClass o usando el metodo css() al que puedes pasarle como argumento un objeto json con las propiedades css que necesites.

Pero bueno, para saber que opción te va a ser mejor hace falta ver tu propuesta.
Saludos.

fedefrankk · #3 (**permalink**) 09/06/2012, 11:40

Hola gracias por tu repuesta, el codigo que tengo es de java, y como comente son efectos bastantes toscos, pasa de 100px a 110 px muy rapido es feo de verdad.

El tema sería hacerlo en jquery se que es mas sencillo. pero en fin no encuentro nada en goggle.. por klo menos yo..

Gracias por tu tiempo
Saludos
fede

WorldFox · #4 (**permalink**) 09/06/2012, 14:08

Cita:

Iniciado por fedefrankk

Hola gracias por tu repuesta, el codigo que tengo es de java, y como comente son efectos bastantes toscos, pasa de 100px a 110 px muy rapido es feo de verdad.

El tema sería hacerlo en jquery se que es mas sencillo. pero en fin no encuentro nada en goggle.. por klo menos yo..

Gracias por tu tiempo
Saludos
fede

No tiene porque ser muy brusco, puede elegir la velocidad a la que ocurre con css poniéndole el atributo transition.

#5 (**permalink**) 09/06/2012, 14:43

Este sería un ejemplo, tan solo con CSS, luego tu ya lo aplicas a tu situacion:

Código HTML:

<html>
<head>
<style>
.objeto {
width: 60px;
height:100px;
border:1px solid black;
-o-transition:all .2s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}
.objeto:hover {
width: 60px;
height:110px;
-o-transition:all .2s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}
</style>
</head>
<body>
<div class="objeto"></div>
</body>
</html>

No lo he probado, pero en teoría mientras mantegas el raton encima del div, debería estirarse durante 2 segundos hasta los 110 pixeles, luego al soltarlo, recupería su posición original en otros 2 segundos...(:

fedefrankk · #6 (**permalink**) 10/06/2012, 14:25

Increible... laventanadewindows muchisimas gracias.!! ni utilizo java ni nada.. es puro css..

Muchas gracias.!!!!!!

Saludos a todos y gracias por su tiempo.!!!!!
fede