You could use:
function cloudRight() {
$(".cloudRight").animate({
left: "+=1000px",
}, 30000, "swing",
function () {
$(this).animate({
left: "-=1000px",
}, 30000, "linear", cloudRight); // call it again on animation complete
});
}
$(cloudRight); // call on document ready
If there is more than one element with class cloudRight
, you should use a promise instead, to recall it only once each time:
function cloudRight() {
$(".cloudRight").animate({
left: "+=1000px",
}, 30000, "swing",
function () {
$(this).animate({
left: "-=1000px",
}, 30000, "linear");
}).promise().done(cloudRight);
}