如何按比例设置此jQuery动画的持续时间？

Question

我已经创建了一个快速测试来展示我正在尝试做的事情:

http://jsfiddle.net/zY3HH/

如果单击"切换宽度"按钮一次,则正方形将花费一秒钟增长到全宽.再次单击它,将需要一秒钟缩小到零宽度.

但是,快速连续两次单击"切换宽度"按钮 - 第二次当正方形增长到其总宽度的一小部分(如10%)时 - 您会注意到动画仍需要一秒钟到将广场返回到零宽度,这看起来很尴尬,IMO.

虽然这种行为是预期的,但我希望后一个动画发生的时间与它所覆盖的宽度成正比.换句话说,如果你第二次点击"切换宽度"时,正方形是其总宽度的10%,我希望它需要大约1/10秒才能缩小到零宽度.

应该相对容易(我认为)使duration属性的值动态化,在click运行jQuery 处理程序时计算,以测量方块的当前宽度并相应地确定持续时间.

但是,我错过了更好的方法吗？jQuery是否提供了一种简单的方法,或者暴露某种方法或属性以使其更容易？

Answer 1

我认为 jQuery 没有任何内置实用程序可以执行此操作。然而，做你想做的事情所需的数学相当简单，所以我建议就走这条路。就像是：

var expanded = false;
$('input').click(function() {
  $('div').stop();
  var duration;
  if (expanded) {
    duration = ($('div').width() / 100) * 1000;
    $('div').animate({ width: '0' }, { queue: false, duration: duration });
    expanded = false;
  } else {
    duration = ((100 - $('div').width()) / 100) * 1000;
    $('div').animate({ width: '100px' }, { queue: false, duration: duration });
    expanded = true;
  }
});

这是一个工作示例： http: //jsfiddle.net/zY3HH/2/

如果您有一些空闲时间，也许您可​​以使持续时间插值逻辑更加通用，并将其打包为 jQuery 扩展/插件。