jQuery 动画和属性值的百分比

Posted 2023-05-08

【中文标题】jQuery 动画和属性值的百分比

【英文标题】：jQuery animate and property values in percentage

【发布时间】：2011-10-16 03:58:41

【问题描述】：

我试图为 div 设置动画，并尝试使用在其他地方检索到的一些值，我知道该值是正确的，因为我已经打印了输出......所以我想知道为什么它不能正常工作?

animateBar(percentage.toFixed(2)+'%');

[ . . . ]

function animateBar(percentage)

    $('#innerBox').animate(width: percentage, 3000);

【参考方案1】：

在动画中使用百分比似乎存在错误。 http://bugs.jquery.com/ticket/10669

我建议自己计算要添加的像素数，这样可能会起作用：

percent = 0.25;
add_width = (percent*$('#innerBox').parent().width())+'px';
$('#innerBox').animate('width': '+='+add_width, 3000);

【讨论】：

我可以确认这是一个截至 jQuery 1.10.2 仍未修复的错误，因为这正是我遇到的问题：/

在 2.1.0 中仍然会确认这一点，但前提是父容器没有静态设置的宽度，并且此修复有效。

【参考方案2】：

如果您对使用 CSS3 过渡感到满意，这将有效：

JS：

function animateBar(percentage)
    $('#innerBox').width(percentage+'%');

CSS：

#innerBoxtransition: 3s

【讨论】：

很棒的解决方案！

简单且优化。

【参考方案3】：

这已经很老了，但这种方式对我有用：

wthSelected = 85;
$(this).animate(
    width:wthSelected+'%'
  , 1500); 

我也在使用 jquery-1.11.2.min.js 和 jquery.mobile-1.4.5.min.js

【参考方案4】：

尝试像这样添加单位文本：

function animateBar(percentage)

    $('#innerBox').animate(width: percentage+"px", 3000);

【参考方案5】：

可能是您允许百分比为小数点后 2 位。您是否尝试过使用整数值？我不确定所有浏览器都支持浮动百分比。

另外，请确保 $('#innerBox') 有一组 width 开头。它不一定是百分比。它只需要在 CSS 中或通过 JS 方法进行设置。

【讨论】：

我已经用浮点数替换了变量，它工作正常，只有当我将变量作为属性值时才会出现这个问题。

而$('#innerBox')的宽度是在动画程序开始之前定义的？不能是auto。它需要在某个地方定义，可以是百分比，也可以是像素宽度。

我认为您无法链接到相关页面？

没有东西，我无法诊断。我已经在 J​​S fiddle 中尝试过这个，它工作正常。我将开始检查您的 jQuery 版本之类的内容，并确保将正确的值传递给宽度。实际上，这让我想知道：您的“百分比”值来自哪里？

【参考方案6】：

如果是百分比，那么在这里试试这个

function animateBar(percentage) 
    percentage = percentage+"%";
    $('#innerBox').animate('width': percentage, 3000);

我们在这里使用了一个 css 属性，所以不要忘记单引号，所以它应该是 'width' 而不是宽度

【讨论】：

'width' 与 width 无关； javascript 解析器对它的解释相同。