Question

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

http://jsfiddle.net/zY3HH/

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

然而，快速连续两次点击“切换宽度”按钮 - 第二次当广场增长到其总宽度的一小部分（如10％）时 - 你会发现动画仍然需要完全秒将广场返回到零宽度，这看起来很尴尬，IMO。

虽然预期会出现这种情况，但我希望后一种动画能够在与其覆盖的宽度成比例的时间内发生。换句话说，如果你第二次点击“Toggle Width”时，正方形是它的总宽度的10％，我希望它需要大约1/10秒才能缩小到零宽度。

在运行jQuery duration处理程序时计算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;
    }
});

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

2 个答案: