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

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

http://jsfiddle.net/zY3HH/

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

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

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

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

但是,我错过了更好的方法吗？ 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扩展/插件.

原文地址：https://www.jb51.cc/jquery/157219.html