jQuery动画和属性值百分比

Question

我试图为div设置动画，我尝试在其他地方使用某些值进行检索，我知道这个值是正确的，因为我已打印出输出...所以我想知道为什么它不能正常工作？

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

[ . . . ]

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

Answer 1

似乎有一个使用动画百分比的错误。 http://bugs.jquery.com/ticket/10669

我建议计算自己添加的像素数，这样的事情可能有用：

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

Answer 2

如果您对使用CSS3过渡感到高兴，这是有效的：

JS：

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

CSS：

#innerBox{transition: 3s}

Answer 3

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

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

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

Answer 4

尝试添加单位文字，如下所示：

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

Answer 5

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

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

Answer 6

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

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

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