Question

On my site there are two bags with div ids “cloud” and “cloud2”, and they are inside a div “sky”

The JQuery script below is supposed to move the bags/clouds to the right, but I can`t get it to work.

Can you please tell me what I`m doing wrong?

I`m a bit of a newbie, so please keep that in mind when answering. Thanks for your help

<script>
    var cloudMoved = false;
    var cloud2Moved = false;

    $(init);

    function init()
    {
        cloudMove();
        cloud2Move();
        }

    function cloudMove()
    {
        if (!cloudMoved)
        {
            $("#cloud")
                .css("left", $("#cloud").offset().left)
        }

        $("#cloud")
            .animate(
                {
                    left: $("#sky").width()
                },
                cloudMoved ? 180000 : 150000,
                "linear",
                function()
                {
                    $(this)
                        .css("left", -parseInt($(this).css("width")))
                    cloudMoved = true;
                    cloudMove();
                }
            )
    }

    function cloud2Move()
    {
        if (!cloud2Moved)
        {
            $("#cloud2")
                .css("left", $("#cloud2").offset().left)
        }
        $("#cloud2")
            .animate(
                {
                    left: $("#sky").width()
                },
                cloud2Moved ? 120000 : 60000,
                "linear",
                function()
                {
                    $(this)
                        .css("left", -parseInt($(this).css("width")))
                    cloud2Moved = true;
                    cloud2Move();
                }
            )
    }



    </script>

CSS

.custom #sky
{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 131px;
    overflow: hidden;
}  


.custom #cloud
{
    position: absolute;
    left: 5%;
    top: 15px;
    z-index: 2;
    width: 120px;
    height: 91px;
        background-repeat: no-repeat;
}

.custom #cloud2
{
    position: absolute;
    left: 25%;
        z-index: 3;
        top: 65px;
    width: 101px;
    height: 66px;
        background-repeat: no-repeat;
}

Answer 1

I believe if you add semicolons to a few of your statements, the code should work.

<script type="text/javascript">
    var cloudMoved = false;
    var cloud2Moved = false;

    function init() {
        cloudMove();
        cloud2Move();
    }

    function cloudMove() {
        if (!cloudMoved) {
            $("#cloud").css("left", $("#cloud").offset().left);
        }
        $("#cloud").animate({left: $("#sky").width()},
                cloudMoved ? 180000 : 150000,
                "linear",
                function() {
                    $(this).css("left", -parseInt($(this).css("width")));
                    cloudMoved = true;
                    cloudMove();
                });
    }

    function cloud2Move()
    {
        if (!cloud2Moved) {
            $("#cloud2").css("left", $("#cloud2").offset().left);
        }
        $("#cloud2").animate({left: $("#sky").width()},
                cloud2Moved ? 120000 : 60000,
                "linear",
                function() {
                    $(this).css("left", -parseInt($(this).css("width")));
                    cloud2Moved = true;
                    cloud2Move();
                });
    }
    $(document).ready(function(){
        $(init);
    });
</script>