使jQuery按比例缩放<；部门>；保持新尺寸

我有一个圆形的

div

我试图在单击按钮时缩放：

<button id="2007">2007</button>
<div id="test2"></div>

我的JS从中间开始减小div的大小，正如我所希望的：

$("#2007").click(function(){
    $("#test2").effect("scale",{percent: 50},"1000");
});

问题是，一旦缩放效果完成，DIV就会恢复到其原始大小并跳到新位置

有人知道我如何使DIV保持按尺寸缩放，并防止它跳转到重新定位吗

-只需单击“2007”按钮即可查看发生了什么

编辑：我添加了一个

---

将

.effect

更改为

.animate

根本不起作用，我确信一定有一种方法可以使用

.effect

而不必使用

div

跳转，但我仍然感到困惑。

也许你可以尝试提供一个

回调来在效果完成后执行

您可以在这里看到一个示例：
也许您可以尝试提供一个
回调，以便在效果完成后执行

您可以在这里看到一个示例：
jQuery UI效果将在完成后恢复其原始属性，您可以尝试使用CSS或
.animate（）
，下面是一个使用CSS（）的示例

更新：查看此库（），我认为这对您很好请求=）
jQuery UI效果将在完成后恢复其原始属性，您可以尝试使用CSS或
.animate（）
，以下是使用CSS（）的示例

更新：看看这个库（），我认为这对你来说是很好的request=）
为了让停留在最终状态，在动画停止后-你只需要使用正确的jquery版本+正确的jquery ui版本（我在这个例子中使用了jquery-1.7.2+jquery-ui-1.8.18，它可以工作）：

源代码：

    $("#big").click(function(){
     $(".target").effect( "size", 
      { to: {width: 200,height: 200} }, 1000 );
  });

  $("#small").click(function(){
     $(".target").effect( "size", 
      { to: {width: 100,height: 100} }, 1000 );
  });

正如您可以看到的，有一些特定的停止功能。
为了使停留在最终状态，在动画停止后，您只需要使用正确的jquery版本+正确的jquery ui版本（在本例中，我使用了jquery-1.7.2+jquery-ui-1.8.18，它可以工作）：

源代码：

    $("#big").click(function(){
     $(".target").effect( "size", 
      { to: {width: 200,height: 200} }, 1000 );
  });

  $("#small").click(function(){
     $(".target").effect( "size", 
      { to: {width: 100,height: 100} }, 1000 );
  });

正如你所看到的，有一些特定的停止函数。
我以前做过，没有任何问题，但是我没有使用
.effect（）
。你能发布一个JSFiddle吗？Jodes，刚刚在上面添加了一个。我以前做过，没有任何问题，但是我没有使用
.effect（）
。你能发布一个JSFiddle吗？Jodes，刚刚在上面添加了一个感谢提示-回调的问题是，如果div的位置发生任何变化，它将不起作用。我想我需要做的是找到一种方法来计算圆的中心点，然后从那里开始使用jquery scale，这样圆可以适当地收缩/扩展，并且可以在一个页面上放置多个圆实例，而无需键入精确的像素值进行定位。感谢提示-回调的问题是，如果div的位置发生任何变化，它将不起作用。我想我需要做的是找出一种方法来计算圆心，然后使用jquery scale从那里开始，这样圆就可以在适当的位置收缩/扩展，并且可以在一个页面上放置多个圆的实例，而无需键入精确的像素值进行定位。谢谢-transit库看起来非常有前景！我会用我在那里找到的东西发布一个编辑…谢谢-transit库看起来真的很有前途！我会发布一个我在那里找到的编辑。。。
    $("#big").click(function(){
     $(".target").effect( "size", 
      { to: {width: 200,height: 200} }, 1000 );
  });

  $("#small").click(function(){
     $(".target").effect( "size", 
      { to: {width: 100,height: 100} }, 1000 );
  });