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

Question

我创建了一个快速测试来展示我想要做什么：

http://jsfiddle.net/zY3HH/< /a>

如果单击“切换宽度”按钮一次，正方形将需要一秒钟才能增长到全宽。再次单击它，需要一秒钟才能缩小到零宽度。

但是，快速连续单击“切换宽度”按钮两次 - 第二次当正方形仅增长到其总宽度的一小部分（例如 10%）时 - 您会注意到动画仍然需要一整秒的时间才能完成将正方形返回到零宽度，这看起来很尴尬，IMO。

虽然这种行为是预期的，但我希望后一个动画发生的时间与其覆盖的宽度成正比。换句话说，如果当正方形达到其总宽度的 10% 时再次单击“切换宽度”，我希望它需要大约 1/10 秒才能缩小到零宽度。

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

但是，我是否缺少更好的方法来做到这一点？ 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 扩展/插件。

Answer 2

这就是你想要的 - http://jsfiddle.net/FloydPink/qe3Yz/

var expanded = false;
$('input').click(function() {
    var width = $('div').width();   //gives the current width of the div as a number (without 'px' etc.)
    if (expanded) {
        $('div').animate({
            width: '0'
        }, {
            queue: false,
            duration: (width/100 * 1000)// (current width/total width * 1 sec in ms)            });
        expanded = false;
    } else {
        $('div').animate({
            width: '100px'
        }, {
            queue: false,
            duration: 1000
        });
        expanded = true;
    }
});