放大/展开元素的最佳方式：CSS或jQuery

Question

我想知道当您将鼠标悬停在元素上时，最好的方式是展开元素的大小/缩放比例：CSS或jQuery？

我用CSS过渡使这个fiddle，但它不会做我想做的，widht和高度没有大小光滑比例：

<div></div> 

div{ 

    width: 300px; 
    height: 300px; 
    background: #aa00aa; 
    -moz-transition: height 0.3s ease-in-out; 
    -webkit-transition: height 0.3s ease-in-out; 
    -o-transition: height 0.3s ease-in-out; 
    transition: height 0.3s ease-in-out; 

    -moz-transition: width 0.3s ease-in-out; 
    -webkit-transition: width 0.3s ease-in-out; 
    -o-transition: width 0.3s ease-in-out; 
    transition: width 0.3s ease-in-out; 

} 

div:hover{ 
    background: #aa00aa; 
    height: 400px; 
    width: 400px; 

} 

Answer 1

这种转变使你的盒子较大

transition: width 1s ease-in-out, height 1s ease-in-out; 

但是要实现真正的缩放效果，您需要同时将框移到左侧和顶部。像这样http://jsfiddle.net/slash197/FCxfR/14/

Answer 2

转换工作就像任何其他的CSS规则。如果您有：

color: red; 
color: green; 

...颜色会变成绿色。在这种情况下，转换仅适用于width。您可以同时指定：

transition: height 0.3s ease-in-out, width 0.3s ease-in-out; 

或

transition-property: height, width; 
transition-duration: .3s; 
transition-timing-function: ease-in-out; 

甚至

transition-property: height, width; 
transition: .3s ease-in-out; 

http://jsfiddle.net/FCxfR/13/