JavaScript: setting direction of css change on mouseover?

In the following code, (see example fiddle), if you mouseover the green, the height of the two red boxes will change, but the height expands down. Is there a way to make the height expand upwards?

css:

.one{
    position: absolute; 
    left: 110px; 
    top: 0px; 
    background: green;
}

.two {
    position: absolute; 
    left: 70px; 
    top: 40px; 
    background: red; 
    height: 25px; 
    font-size: 25px;
}

.three {
    position: absolute; 
    left: 200px;
    top: 40px; 
  开发者_StackOverflow社区  background: red; 
    height: 25px; 
    font-size: 25px;
}

html:

<div class="one">15,000,000</div>
<div class="two">700</div>
<div class="three">800</div>

javascript:

$('.one').mouseover(function(){
   $('.two, .three').css('height','50px');
}).mouseout(function(){
    $('.two, .three').css('height', '25px');
  });

Just alter the top of the boxes as well:

$('.one').mouseover(function(){
   $('.two, .three').css({ height : '50px', top: '15px'});
}).mouseout(function(){
    $('.two, .three').css({ height : '25px', top: '40px'});
  });

http://jsfiddle.net/wyxJ7/12/

Try this, http://jsfiddle.net/Gbwjj/

Its more of a CSS issue than a JavaScript one

You can use change the 'top' css attribute at the same time so that the user perceives it as the height expanding upwards. Here's an example using animate().

 $('.one').mouseover(function(){
    $('.two, .three').animate({
        height:"50px",
        top:"-=25"
    });
}).mouseout(function(){
    $('.two, .three').animate({
        height:"25px",
        top:"+=25"
    });
  });