Question

An Example of the problem

Randomly i have a character on screen. He starts offscreen and smoothly moves onto the screen. However i have the problem with it moving offscreen. Right now i put him in the body using jquery. When it gets to the right side i plan to remove him by checking the width and waiting until he is completely out of screen (just before he is out of screen half his body should be painted). The problem is when he moves to the right the width gets larger and i see a scrollbar appear.

How do i make a character not affect the width, have its body partially painted (on the right side, left side is not an issue) and know when it is completely out of sight?

Answer 1

function MoveCode(){
    var l = $('.ball').css("left");
    $('.ball').css("left", (parseInt(l) + 8) + "px");
    setTimeout(MoveCode, 160);
}

$('body').append('<div style="width:100%; overflow:hidden;"><img class="ball" src="http://michaelreid.typepad.com/.a/6a00e54edabd838833011168a00f09970c-800wi"/></div>');
MoveCode()

just wrap your image in a div so you have something to set the overflow:hidden on without screwing with the page.