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

StackOverflow https://stackoverflow.com/questions/17982647

Question

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);
}
Was it helpful?

Solution

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"});});

OTHER TIPS

It looks like it's working for the most part. The sailboat looks good, right? I think you want to increase the z-index for all items so that they sit on top of everything else on the page. Also, just put them all in the top level of the html. That way, other layers won't take precedence and display on top of the moving graphics.

<html>
<head>
 ...
</head>
<body>
  <img id="sailboat" />
  ...
</body>
</html>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top