jquery - 缩放/展开元素的最佳方式: CSS or jQuery

Question

我想知道当您将鼠标悬停在元素上时扩大元素的大小/缩放的最佳方法是什么:CSS 还是 jQuery？

我做了这个fiddle使用 CSS 过渡，但它没有达到我想要的效果，宽度和高度的大小不平滑且不成比例:

<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/