Jquery 需要重复我的动画功能吗

我需要制作一些云效果并循环这个效果，我需要制作一些div并像我的代码一样从左向右移动它们。但是我的问题是我不能重复这个功能：（有任何帮助吗

var windowWidth=$（window）.width（）；

animate（）接受一个回调函数，该函数将在动画完成时启动

$(document).ready(function () {
    var $cloud = $('#cloud'),
        animateCloud = function() {
            var direction = $cloud.css('left').slice(0,1) === '-' ? '0px' : '-50px' 
            $cloud.animate({left: direction}, 9000, "linear", animateCloud);
        };
    animateCloud();
});

---

示例：

它不起作用，你能简单地理解它吗？我只是在开始阶段的人：（@MohamedSamy发布了一个工作的jsfiddle，这样你就可以看到发生了什么。基本上，我已经创建了一个函数，可以左右动画云。当动画完成时，它会调用自己。注意，你需要调用

animateCloud（）；

以实际启动动画。

$(document).ready(function () {
    var $cloud = $('#cloud'),
        animateCloud = function() {
            var direction = $cloud.css('left').slice(0,1) === '-' ? '0px' : '-50px' 
            $cloud.animate({left: direction}, 9000, "linear", animateCloud);
        };
    animateCloud();
});