Change direction of animation

I am using this cloud effect http://solidgiant.com/2011/02/awesome-cloud-effec开发者_Go百科t/ but i want to change the direction of the cloud movement. i want them to move right to left, Can anyone help me with this

i am done with the change in direction as told by Nishchay Sharma, but still one problem is there, the clouds doesnt run in loop.. they just gte stuck when they reach left side :(

---

In clouds.css, change:

#cloud
{
    ...
    left: 5%;
    ...
}

to

#cloud
{
    ...
    left: 80%;
    ...
}

and in clouds.js change

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

to

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

Do the same to $('#cloud2') and $('#cloud3'). (Change $(..).animate('left') to 0.)

Further Addtion To get the clouds back on the other corner after they complete their animation. For each cloudMove(), cloud2Move() and cloud3Move():

Change

.animate(
            {
                left: 0
            },
            cloud3Moved ? 400000 : 150000,
            "linear",
            function()
            {
                $(this)
                    .css("left", -parseInt($(this).css("width")))
                cloud3Moved = true;
                cloud3Move();
            }
        )

to

.animate(
            {
                left: "-"+$("#cloud").width()+"px"
            },
            cloud3Moved ? 400000 : 150000,
            "linear",
            function()
            {
                $(this)
                    .css("left", parseInt($(window).width()+'px'))
                cloud3Moved = true;
                cloud3Move();
            }
        )

Note: Don't forget to change the left: option according to the cloud id.

---

In your cloud.js change the cloudMove() function to -

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

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

Change the timers to your liking!

The other two clouds are just copies - you can do the same with them

---

change (remove "-" sign)

.css("left", -parseInt($(this).css("width")))

to

.css("left", parseInt($(this).css("width")))