jQuery animate horizontal div from off screen without scroll

Question

I'm attempting to animate a div so that it appears to move onto the screen when the page loads. So far the animation is seamless. The problem I'm having is that because the div technically begins beyond the visual boundaries of the document, (100% or 1200px) most browsers seem to start the page with a horizontal scrollbar which shrinks as the div moves to the center, and is really distracting. I don't want to remove the scrollbar entirely in case of smaller than usual windows, but I don't want it constantly implemented either.

I have attempted placing the animated div within a container div on the same z-index, but while it recognizes the placement inside the container, it still stretches past the screen. If there is a solution to this, either via jquery, javascript, or css, (trying to avoid UI library) I'd be much appreciative.

jQuery:

$(document).ready(function(){
$(".move").animate({marginLeft:"100px"},700);   
});

CSS:

.move {
margin-top:70px;
margin-left:100%;
height:300px;
width:400px;
z-index:301;
}

Answer 1

Set overflow to hidden. You can even do this on the body if necessary