使用百分比的jQuery动画

Question

有没有办法使用jQuery使用百分比来动画化一个div？

我尝试过以下方法：

$('.box1').animate({width:($(".wrapper").width()*.100)},"fast");})
$('.box1').animate({width:'100%'},"fast");})
$('.box1').animate({width:100%;})

以上方法都不起作用...

有什么其他想法吗？

更新

var p_e_h= 1.0;
var p_e_w= 1.0;
 $('.box1').animate({width:($(".wrapper").width()* p_e_w)},"fast");
       $('.box1').animate({height:($(".wrapper").height()* p_e_h)},"fast");

宽度可以使用，但高度无法使用。除非我再次点击按钮。

- user849137

---

width: 100%; 会被视为试图使用分号作为除数对100取模 - 这是一种语法错误。 - Marc B

“*.100”并不是真正的100%。 - pimvdb

Answer 1

var fiftyPrct = 0.5, //50%
    hundredPrct = 1; //100%

$('.box1').animate({ width: ($('.wrapper').width() * fiftyPrct) }, 'fast');
$('.box2').animate({ width: ($('.wrapper').width() * hundredPrct) }, 'fast');

应该可以正常工作。

更新

由于您正在执行2个不同的.animate调用，因此动画会排队并按顺序执行。只需使用相同的动画调用即可：

var p_e_h= 1.0;
var p_e_w= 1.0;

$('.box1').animate({
    width: ($(".wrapper").width() * p_e_w),
    height:($(".wrapper").height() * p_e_h)
},"fast");

Example of it working: jsFiddle

- Chad

---

嘿，谢谢你。它可以工作，但只有宽度有效。我已经将其分配给一个按钮。当我点击按钮时，宽度会扩展，但高度不会，直到我再次点击按钮。你能帮我检查一下我的更新吗？谢谢。 - user849137

嗯，那还是做同样的事情。我应该发布所有的代码吗？ - user849137

你可能需要清除浏览器缓存，因为它可以正常工作：jsFiddle - Chad

啊，解决了。是我之前放进去的另一段代码出了问题。谢谢各位。 - user849137