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根本不起作用，我确信必须有一种方法可以在没有.effect跳跃的情况下使用div但是我还是难过。

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/

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

3 个答案: