Javascript Jquery：收缩到中心并停留在那里

我有一个元素，我想收缩，以中心为消失点，收缩到一定的百分比，然后保持不变

这非常接近：

$（'canvas.intro'）.effect（“比例”{percent:80}，700）

但它有两个问题：缩放更改没有保留，并且在动画结束后元素的位置发生了移动

这是一把小提琴，显示了我的意思：



编辑

Hrm，显然这是jQueryUI中的一个错误：

任何人都能看到一个简单的解决方法来实现缩放效果，或者一个很好的方法来通过一个普通的动画以灵活的方式实现同样的效果吗？
因此，当点击黑框时，它应该缩小到
10px*10px
方框（你可以改变它）距离
100px
顶部
和
100px
左侧
（您也可以更改）。如果这是您需要的，那么这就是解决方案

JS代码：
编辑：
我在谷歌上搜索了一下，找到了这个和这个。最后一个答案有一个插件，正好满足您的需要
 来把小提琴怎么样？当它“未保留”时，请尝试使用animate jquery方法，该方法允许同时设置多个css属性的动画。如果您不告诉我们何时/如何触发电子秤，我们无法解释为什么不保留。关闭，但问题在于此。我需要它收缩到中心（因此是
缩放
效果），完成后，我不想计算最终的位置和大小，因为效果已经做到了，在真实的应用程序中，元素可以有可变的位置和大小。是的！就是这样。我将其修改为onclick:@mtyson很高兴看到它解决了问题！快乐编码！
$('#test').on('click', function(){
    // Means within 4 seconds, change width, height to 10px and offsets to 100px
    $(this).animate({
        width:"10px",
        height:"10px",
        top:"100px",
        left:"100px"
    }, 4000);
});