jQuery动画和百分比属性值

Question

我试图给一个 div 元素添加动画效果，并尝试使用从其他地方获取的某个值，我知道这个值是正确的，因为我已经输出了它... 所以我想知道为什么它不能正常工作？

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

[ . . . ]

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

- haunted85

Answer 1

似乎在使用animate时存在百分比的bug。http://bugs.jquery.com/ticket/10669 我建议自行计算要添加的像素数，类似这样的方法可能有效：

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

- A. Canyon

---

我可以确认，这是一个仍未在jQuery 1.10.2中修复的错误，因为这正是我遇到的问题:/ - huzzah

确认在2.1.0版本中仍然存在此问题，但只有当父容器没有静态设置宽度时才会出现，而此修复方法有效。 - Nick M

Answer 2

如果您乐意使用CSS3转换，则此方法有效：

JS：

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

CSS：

#innerBox{transition: 3s}

- Caedmon

---

太棒了的解决方案！ - SilverSurfer

简单而优化。 - Sameer

Answer 3

这可能有些陈旧，但这种方法对我来说很有效：

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

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

- Fede

Answer 4

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

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

- Sebastian Perez

Answer 5

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

另外，请确保 $('#innerBox') 具有初始设置的 width。它不必是百分比，只需在 CSS 或通过 JS 方法中进行设置即可。

- dclowd9901

---

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

而$（'#innerBox'）的宽度在动画过程开始之前就已经定义了吗？它不能是“自动”的。它需要在某个地方定义，可以是百分比或像素宽度。 - dclowd9901

你能否提供相关页面的链接？ - dclowd9901

没有某些东西，我就无法进行诊断。我已经在JS Fiddle中尝试过了，它可以正常工作。我会开始检查一些事情，比如您的jQuery版本，并确保正确的值被传递给宽度。实际上，这让我想知道：你的“百分比”值来自哪里？ - dclowd9901

Answer 6

如果是百分比，那么尝试这个。

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

我们在这里使用了CSS属性，请不要忘记使用单引号，因此应该是'width'而不是width。

- Abdelkader Soudani

---

'width' 和 width 之间的区别并不重要；在 JavaScript 解析器中它们被解释为相同的意思。 - brianreavis