JavaScript：マウスオーバー時のCSS変更の方向を設定しますか？

Question

次のコードでは、（see example fiddle）、緑をマウスオーバーすると2つの赤いボックスの高さは変わりますが、高さは下がります。高さを上向きにする方法はありますか？

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; 
    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'); 
    }); 

Answer 1

は全く同じように箱のtopを変える：

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

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

Answer 2

ユーザーが感じるように、同時に「上部」CSSの属性を変更するには、使用できるJavaScriptの1

Answer 3

よりもCSSの問題の http://jsfiddle.net/Gbwjj/

そのより多く、これを試してみてくださいそれは高さが上に向かって広がっている。次に、animate（）を使用した例を示します。

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