jQuery〜如何從中心中心動畫框寬度和高度

Question

框的大小是寬度：200px，高度：140px。 使用動畫改變框大小時，它將從左上方變換。 如何更改它從中心中心轉換。

的Html

<div class="box"></div> 

CSS

width:200px; 
height:140px; 
background-color:#0066CC; 

jQuery的

$('.box').mouseover(function() { 
    $(this).animate({ 
    width: "210px", 
    height: "150px" 
    }, 200); 
}); 
$('.box').mouseout(function() { 
    $(this).animate({ 
    width: "200px", 
    height: "140px" 
    }, 200); 
}); 

Answer 1

我不認爲這是可能的。或者，您可以動畫盒子的填充...

<style> 
    .box { width:200px; height:140px; } 
</style> 

<div class="box"><div></div></div> ​ 

<script> 
    $('.box').mouseover(function() { 
    $(this).animate({ 
     'padding' : 5 
    }, 200); 
    }); 
    $('.box').mouseout(function() { 
    $(this).animate({ 
     'padding' : 0 
    }, 200); 
    }); 
</script> 

工作實例：

http://jsfiddle.net/WryxR/1/

Answer 2

很好所以我在這裏用的解決方案.. Check This fiddle Example

CSS：

.box{ 
    width: 200px; 
    height: 140px; 
    background-color:#0066CC; 
    position : absolute; 
    left: 100px; 
    top: 100px; 
} 

JQUERY：

$('.box').hover(function(){ 
    $(this).animate({ 
    'width': '220px', 
    'height': '160px', 
    'left': '90px', 
    'top': '90px' 
    },200); 
    },function(){ 
    $(this).animate({ 
    'width': '200px', 
    'height': '140px', 
    'left': '100px', 
    'top': '100px' 
    },200); 
}); 

如你願意，你可以更改值。

Answer 3

這裏只用CSS一個選項（注：CSS3）：http://jsfiddle.net/g67cc/6/

.box { 
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    -o-transition: all 0.2s ease-in-out; 
    -ms-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 

    width: 200px; 
    height: 140px; 
    background-color:#0066CC; 
    position : absolute; 
    left: 100px; 
    top: 100px; 
} 

.box:hover { 
    width: 220px; 
    height: 160px; 
    left: 90px; 
    top: 90px; 
}