Using javascript to create effect

1

Good personal to want to add an effect to a div. I'm currently using css Hover to animate this div, however as everyone knows the hover is activated when the mouse goes over, I was wondering how I can animate that same div just when it's clicked.

Currently the css code looks like this:

#box{width:280px; height:30px; line-height:30px; background:#0F0}
.area{width:260px; height:0px; background:#000; margin:0px 10px;  transition-duration:2s}
.box:hover .area{height:100px;}

In this way, the "area" div will "grow" by hovering the mouse, only I want it to "grow" only when the "div" box is clicked.     

asked by anonymous 02.06.2014 / 02:43

1 answer

3

You can use Jquery to effect the effect through click and animate , see:

$('.box').click(function(){$(this).animate({height:'100px'});});

More information at this link link

    
02.06.2014 / 02:49