jquery maths and vars

jquery maths and vars

I'm having a tough time with this. I would like to scroll a div from left to right accross the browser window no matter what size the window is. I'm have a problem with the syntax, I think my logic is correct.

  1. I get the screen size and place it in a var,
  2. I place the div off the left side of the screen with css,
  3. I animate the div accross the screen using the screen value + the div size so that it will clear the right side of the screen completely,
  4. I then animate it back to its starting position by taking the screen size and subtrackting it from itself and subtract the div width, so this should place the div back where it began, off the left side of the screen. This way I can scroll the div from left to right no matter what the screen or browser size is.
Below is my code for one div but obviously my syntax is very wrong, I just typed it like this to illistrate it and because I have no clue how to do it correctly. Any help would be greatly appreciated.

css:
  1. #cloud1
    {
        background-image:url(../images/cloud1.png);
        background-repeat:no-repeat;
        width:323px;
        height:187px;
        left:-450px;
        position:absolute;
    }







jquery:
  1. $(document).ready(function() {
                setTimeout("animate()",300);
            });

        function animate(){
            var screen = $(window).width
            cloud1()
        }
       
        function cloud1(){
            &("#cloud1").animate({left:"+=323px + screen"},10000).animate({left:"screen-screen-323px"},0)
            setTimeout("cloud1()",2000);
        }












Oh I'm working off of this tutorial: http://buildinternet.com/2009/08/crafting-an-animated-postcard-with-jquery/