Alargar un div

legom753 · #1 (**permalink**) 08/12/2012, 13:58

Hola miren, tengo este script.

<html>

<head>

<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: '-=' //substracts 250px
}, 'slow'
);
}
);

});
</script>

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

</head>

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

Eso anda perfecto. pero yo quiero que haga lo mismo al apretar un boton, no al pasar el click. probé de todo pero no me sale

espero su ayuda. gracias

David · #2 (**permalink**) 08/12/2012, 14:01

Usa el evento click() del botón en lugar del hover() del div.

codeams · #3 (**permalink**) 08/12/2012, 15:26

Usa transition (CSS, Eso recomendaría yo)

Código CSS:

Ver original#div1{
height:50px;
overflow:hidden;
background: red;
transition:height 1s; /*Lee sobre el soporte de transition en los diferentes navegadores*/
}
#div1:hover{
height:100px;
}

Te ahorrarías muchos problemas ¿No crees?