jquery - 使 jQuery 缩放保持新尺寸

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 保持在其按比例缩放的尺寸并防止它跳到重新定位？

这是一个 JSbin 示例- 只需单击“2007”按钮即可查看发生了什么。

编辑：我添加了一个JSFiddle

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

Answer 1

为了保持最终状态，动画停止后 - 你只需要使用正确的 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 );
  });

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

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/