HTML/CSS/JAVASCRIPT : How to move an element and not show scrollbars

i'm trying to slide a 开发者_如何学JAVAdiv element from outside the page to within the page. However as soon as the element is shown outside the page, horizontal scrollbars appear!

How can I achieve this without the scrollbars appearing?

Any help appreciated very muchly, thanks :)

Briefly, using overflow-x:

function moveStuff() {
    $('body').css('overflow-x', 'hidden');
    $('#iteminmotion').show().animate(..., function() {
        $('body').css('overflow-x', 'auto');
    });
}

move the element off the page to the left, moving it off to the right increases the width of the page

You could temporarily turn off side scrolling by applying this css to the body:

body {overflow-x:hidden;}

http://jsfiddle.net/pxfunc/YYUZJ/

Do you really need to construct the element off page, or just make it look like it slides onto the screen? Ive done similar things in the past to emulate a graphic that slides across a page, but instead of starting outside the view area I've created it as far to the side as possible and then animated the slide to the middle. The user experience at that point can be a graphic that slides onto a page from outside the view area.