jQuery 动画和属性值的百分比答案

【问题标题】：jQuery animate and property values in percentagejQuery 动画和属性值的百分比
【发布时间】：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);

【讨论】：

【解决方案2】：

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

JS：

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

CSS：

#innerBox{transition: 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。它需要在某个地方定义，可以是百分比，也可以是像素宽度。
我认为您无法链接到相关页面？
没有东西，我无法诊断。我已经在 JS fiddle 中尝试过这个，它工作正常。我将开始检查您的 jQuery 版本之类的内容，并确保将正确的值传递给宽度。实际上，这让我想知道：您的“百分比”值来自哪里？

【解决方案6】：

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

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

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

【讨论】：