CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
jbeverid
jbeverid

Reputation: 288

Javascript Image Changing Position Over Time

Basically what I am trying to do is to get the red block to move from the left to the right side of the screen over some period time. The problem I am running into is that the page runs to java script without showing the animation. The block is just moved to the other side of the screen while the user waits on the javascript to finish running. I have tried using jQueries ready but I still get the same result. Any help would be appreciated.

Ok in my HTML code at the end of my body I have:

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="js/nexusStyle.js"></script>   
    <script>                
        $(document).append(function foo(){
           start(); 
        });
    </script>

And in my nexusStyle.js file I have:

function start(){
    createBlock();
    var mHeight = getMonitorHeight();
    var mWidth = getMonitorWidth();
}
function getMonitorWidth() {
    return screen.width;
}
function getMonitorHeight(){
    return screen.height;
}
function horizontalMotion(maxWidth, img){
    for(var i=0; parseInt(i)<maxWidth; i+=50){
        img.style.left = i+"px";
        sleep(100);
    }
}
function sleep(delay){
    var start = new Date().getTime();
    while(new Date().getTime()<start+delay);
}
function createBlock(){
    var img, left, top, interval;
    interval = 100;
    img = document.createElement('img');
    img.src = "img/blocks/redBlock.png";
    left = 0;
    top = 200;
    img.style.position = "absolute";
    img.style.left = left+"px";
    img.style.top = top+"px";
    document.body.appendChild(img);
    horizontalMotion(getMonitorWidth(), img);
}

Upvotes: 1

Views: 1038

Answers (1)

Pow-Ian
Pow-Ian

Reputation: 3635

As a start there are some obvious things wrong:

The movement is all inside a for loop which will execute synchronously until it is done. You need to push it out of the current process to give the browser time to render:

function horizontalMotion(maxWidth, img){
    for(var i=0; parseInt(i)<maxWidth; i+=50){
        setTimeout(function(){
            img.style.left = i+"px";
            sleep(100);
        },0);
    }
}

also your document ready should be:

<script>                
    $(function (){
       start(); 
    });
</script>

this is only going to stop whatever process it is running in, in the current context where you are using it, that would be the render thread.

function sleep(delay){
    var start = new Date().getTime();
    while(new Date().getTime()<start+delay);
}

Furthermore even escaping the render process by using setTimeout you are going to have trouble with the movement happening all at once.

EDIT:

Since you are already using jQuery I suggest you don't reinvent the wheel. Use animate:

$(function(){
    start();
});

var mHeight = getMonitorHeight();
var mWidth = getMonitorWidth();
var interval = 1000;

function start(){
    var theIMG = createBlock();
    var iterations = getMonitorWidth() - 200; //the 200 should be replaced with your image width
    $(theIMG).animate({left:iterations},interval);
}
function getMonitorWidth() {
    return $(document).width();
}
function getMonitorHeight(){
    return $(document).height();
}
function createBlock(){
    var img, left, top;
    img = document.createElement('img');
    img.src = "img/blocks/redBlock.png";
    left = 0;
    top = 200;
    img.style.position = "absolute";
    img.style.left = left+"px";
    img.style.top = top+"px";
    document.body.appendChild(img);
    return img;
}

Upvotes: 1

Related Questions