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