Expanding width and height of a <div> element with mouseover using jquery instead of css?

Question

Hi all you wonderfully helpful people!

I was practicing my CSS skills, and I thought I would push my CSS to the limit and animate some <div> s. Well the CSS has failed me and I'm wondering if there's a an easy way to achieve the effect I describe below using javascript.

<div id="container">
   //on hover div with background img expands in every direction from center acting as border
   <div id="expanding-background">  
      <div id="img-div">   //border's solid-color stroke increases, but size remains same
          <img>
      </div>
   </div>
   //label sits at bottom and drops down as expanding-background expands down.
   <p id="label" style="text-align:centered;">Label</p> 
</div>

With the CSS, I jerry-rigged a solution, but it only worked when I hovered the inner img , so mouseovering the border only made the expanding-background div work. Similar issues occurred with the label's animation. Is there an easy way to initiate animation of a number of divs with the hover of a single div?

Thanks in advance helpful people!

Answer 1

$('#yourdiv').bind('hover', function() {
    // Animations to do when hovering. Example:
    #(this).find('#innerDiv').animate('height', '+=200');
}, function() {
    // Animations to do when leaving with the mouse. Example:
    #(this).find('#innerDiv').animate('height', '-=200');
});