jquery - Jquery 动画到页面的百分比

Question

我正在使用一个简单的 jquery 动画在屏幕上显示 4 个 div：

<script type="text/javascript">
$(document).ready(function() {
$("#boxa").animate({left: "+=100"}, 1000);
$("#boxb").animate({left: "+=300"}, 1000);
$("#boxc").animate({left: "+=600"}, 1000);
$("#boxd").animate({left: "+=900"}, 1000);
});
</script>

是否可以设置移动框的位置，以便它们移动到均匀分布到页面宽度的最终位置，所以如果 divbox 宽度设置为 25%，那么每个框的动画都会自动动画到正确的位置？

谢谢

Answer 1

只需以百分比形式输入左侧偏移量：

$(document).ready(function() {
    $("#boxa").animate({
        left: "0"
    }, 1000);
    $("#boxb").animate({
        left: "25%"
    }, 1000);
    $("#boxc").animate({
        left: "50%"
    }, 1000);
    $("#boxd").animate({
        left: "75%"
    }, 1000);
});​

演示在这里