我怎样才能按比例设置这个jQuery动画的持续时间？
我创建了一个快速测试来展示我想要做的事情：
http://jsfiddle.net/zY3HH/
如果单击“切换宽度”按钮一次，正方形将花费一秒时间增长至全宽。 再次单击它，它将需要一秒钟缩小到零宽度。
但是，快速连续点击两次“切换宽度”按钮 - 第二次当广场长度只增长到其总宽度的一小部分时（例如10％） - 您会注意到动画仍然需要一秒钟的时间才能完成返回广场零宽度，这看起来很尴尬，国际海事组织。
虽然这种行为是预期的，但我希望后面的动画发生的时间与它覆盖的宽度成正比。 换句话说，如果再次单击“切换宽度”时，如果正方形的宽度为总宽度的10％，我希望大约需要1/10秒才能缩小到零宽度。
应该比较容易（我认为）使duration属性的值动态化，当运行jQuery click处理程序时进行计算，以测量当前广场的宽度并相应地确定持续时间。
但是，我错过了一个更好的方法来做到这一点？ jQuery提供了一个简单的方法，还是公开某种方法或属性来使这更容易？
我不认为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扩展/插件。
这是你想要的 - 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;
}
});
上一篇: How can I set the duration of this jQuery animation proportionally?