Question

I’m using a simple jquery animation to display 4 div’s onto the screen:

<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>

is it possible to set the position move the boxes so that they move to their final positions distibuted evenly to the page width, so if the divbox width is set to 25% then the animations for each box animate to the correct position automatically?

Thanks

Answer 1

Just enter the left offset as a percentage:

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

demo here