使 jQuery 缩放的 <div> 保持新的大小

Question

我有一个循环 div 我正在尝试在单击按钮时进行缩放：

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

我已经为初学者使用了 CSS 样式：

#test2 {
  background-color: red;
  opacity:0.5;
  border-radius: 50%;
  width: 300px;
  height: 300px;
  position: absolute;
  z-index:2;
}

我的 JS 可以减少中间中心的 div 大小，就像我想要的那样：

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

问题是，一旦缩放效果完成，DIV 就会恢复到原来的大小并跳转到一个新的位置。

有谁知道如何将 DIV 保持在其缩放尺寸并防止它跳到重新定位？

Here's a JSbin example - 只需单击“2007”按钮即可查看发生了什么。

编辑：我添加了JSFiddle

将.effect 更改为.animate 根本不起作用，我确信必须有一种方法可以在没有div 跳转的情况下使用.effect，但我仍然很难过。

Answer 1

为了使动画停止后保持在最终状态 - 你只需要使用正确的 jquery 版本 + 正确的 jquery-ui 版本（我在这个例子中使用 jquery-1.7.2+jquery-ui-1.8.18 -并且有效）：live example

源代码：

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

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

如您所见，有特定的停止功能。

Answer 2

jQuery UI 效果完成后会恢复原来的属性，你可以尝试使用 CSS 或.animate()，这里是使用 CSS 的示例（http://jsfiddle.net/steelywing/JQdHf/3/）

$("#2007").click(function(){
    $("#test2").css({
        'transition': 'all 1s',
        'transform': 'scale(0.5)',
    });
});

更新：看看这个库 (https://github.com/rstacruz/jquery.transit)，我认为这对你有好处 =)

Answer 3

也许你可以尝试提供一个callback，在效果完成后执行。

您可以在此处查看示例：http://jsfiddle.net/mULWX/1/