Using javascript to create effect

Asked

Viewed 461 times

1

Good people want to add an effect to a div. I’m currently using Hover of css to animate this div, but as everyone knows Hover is activated when the mouse goes over, I wanted to know how I can animate this same div only when it is 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;}

That way the div "area" will "grow" when passing the mouse over, only I want it to "grow" only when the div "box" is clicked.

javascript css

1 answer

3


You can use Jquery to achieve this through click and animate, see:

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

More information on this link http://api.jquery.com/animate/

  • Orion, how do I apply this script? I have to create a name for this script right? only I don’t know how to do anything with jquery

  • 1

    You’ll have to put in head from your page a call to Jquery (<script src="//code.jquery.com/jquery-1.10.2.js"></script>. In the link I put, there are examples of complete pages.

  • 1

    You did. Straight, just the way I wanted.

  • Just to make it better. I clicked once and the div "grew", now how do I make the div that "grew" decrease if I click on itself again or another div that has the class . box box

  • @Ivanveloso you can put a condition inside the click to check if the size of the div is 100 or not, and with this assign an animation for each case, if there are doubts it is better to create a new question not to run away from the current topic

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.