我已经创建了一个快速测试来展示我正在尝试做的事情：
如果单击“切换宽度”按钮一次,则正方形将花费一秒钟增长到全宽.再次单击它,将需要一秒钟缩小到零宽度.
但是,快速连续两次单击“切换宽度”按钮 – 第二次当正方形增长到其总宽度的一小部分(如10％)时 – 你会注意到动画仍需要一秒钟到将广场返回到零宽度,这看起来很尴尬,IMO.
虽然这种行为是预期的,但我希望后一个动画的发生时间与它所覆盖的宽度成正比.换句话说,如果你第二次点击“切换宽度”时,正方形是它的总宽度的10％,我希望它需要大约1/10秒才能缩小到零宽度.
应该相对容易(我认为)使持续时间属性的值动态化,在运行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' },duration: duration });
expanded = true;
}
});
这是一个有效的例子：http://jsfiddle.net/zY3HH/2/
如果你有一些空闲时间,也许你可以使持续时间插值逻辑更通用,并将其打包为jQuery扩展/插件.
