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

Posted 2023-05-08

【中文标题】如何按比例设置此 jQuery 动画的持续时间？

【英文标题】：How can I set the duration of this jQuery animation proportionally?

【发布时间】：2011-11-29 14:45:54

【问题描述】：

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

http://jsfiddle.net/zY3HH/

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

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

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

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

但是，我是否错过了更好的方法来做到这一点？ jQuery 是否提供了一种简单的方法，或者公开了某种方法或属性来使这更容易？

【问题讨论】：

我建议只做数学。没那么复杂：jsfiddle.net/zY3HH/2

嘿，效果很好！这也非常简洁易懂。我认为可能有一个利用 jQuery 公开的属性/方法的解决方案，但我无法想象它比这更简单。您可以添加您的评论作为答案，以便我接受吗？再次感谢！

好的，在下面添加这个作为答案。

【参考方案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 扩展/插件。

【参考方案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 以某种方式提供了解决方案（或至少促进了解决方案）。事实上，我还发现在正方形扩展/收缩时快速单击几次会导致它不可预测地跳跃。不过，这种方法可能是最好的。