Jquery .animate, make a div enter from off screen, float accross, exit off the screen, & repeat

I've just recently began teaching myself how to use jquery functions, and usually I can figure things out own my own (and with google of course). Today I am just out of ideas and I find myself going in circles basically so I am hoping someone can help me out.

Okay, here is the page I am working with: https://dl.dropboxusercontent.com/u/60521097/ServZoo/HTML/index.html

Basically, all I want to do is have the cloud divs enter from off screen left, float to the right side (going behind the center element), exit off screen, & repeat. I have fiddled with this all day and have gotten to the point where I dont know which way is up anymore :-/ Alright, Here it is...

#bg-wrapper {
    max-width:2920px;
    overflow: hidden;
    margin: 0 auto;
    background: url(images/Untitled-3.jpg) left top;
    background-size: 100% 924px;
    background-repeat:no-repeat;
    background-attachment: fixed;
}

#bg-inner {
    width:2305px;
    height: 1080px;
    position: absolute;
    overflow: hidden;   
    margin:0px;
}
#cloudone {
    position:absolute;
    margin-top:5px;
    margin-left:-200px;
    z-index: 1;
    filter:alpha(opacity=80);
  /* CSS3 standard */
        opacity:0.8;
}
#cloudtwo {
    position:absolute;
    margin-top:85px;
    margin-left:-300px;
    z-index: 2;
    filter:alpha(opacity=60);
  /* CSS3 standard */
        opacity:0.6;
}
#cloudthree {
    position:absolute;
    margin-top:65px;
    margin-left:-600px;
    z-index: 4;
    filter:alpha(opacity=70);
  /* CSS3 standard */
        opacity:0.7;
}
#boat {
    margin-top:620px;
    position:absolute;
    margin-right:-2105px;
    z-index: 6;
}

And the script...

$(document).ready(function() {
    setTimeout("cloudone()",10);
    setTimeout("cloudtwo()",13);
    setTimeout("cloudthree()",18);
    setTimeout("boat()",40);
});
function cloudone(){
    $("#cloudone").animate({left:"600px"},5000).animate({right:"600px"}, 5000)
    setTimeout("cloudone()",10000);
}
function cloudtwo(){
    $("#cloudtwo").animate({left:"700px"},7000).animate({right:"700px"}, 6000)
    setTimeout("cloudtwo()",13000);
}
function cloudthree(){
    $("#cloudthree").animate({left:"1000px"},10000).animate({right:"1000px"}, 8000)
    setTimeout("cloudthree()",18000);
}
function boat(){
    $("#boat").animate({right:"2105px"},20000).animate({left:"2105px"}, 20000)
    setTimeout("boat()",40000);
}

By adding a function to the animate parameters, that function will be called once the animation is completed. Inside that function, you can reset the position of the cloud. After you reset the position, you can use a timeout to restart the animation like you've already done.

$("#cloudone").animate({left:"600px"},5000,function(){$("#cloudone").css({"left":"0px"});});