CODEWITHSUNDEEP
jquery
Leahcim
Leahcim

Reputation: 41919

Can't get this JQuery animate to work

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

Upvotes: 0

Views: 288

Answers (4)

drfranks3
drfranks3

Reputation: 665

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>

Upvotes: 1

Steerpike
Steerpike

Reputation: 17544

The page you linked to doesn't include any extra javascript code aside from including the jquery library and google analytics. This makes it pretty hard to figure out what might be going wrong :)

Here's a few potential issues:

  • You have malformed HTML

    <\div id="sky><\div id="cloud">

(No closing " after sky)

  • You don't have a document.ready() holding your jquery calls so it's likely trying to run the code before the page has completed rendering.
  • You don't have any javascript doing any work loading in the page (this one is a bit of a biggy)
  • $(init); is a reference not a call. To call the init function you need to do init();

Upvotes: 1

bbg
bbg

Reputation: 3072

Looks like the attribute of your cloud div is malformed:

<div id=" cloud"="">

Should be

<div id="cloud">

Upvotes: 0

japrescott
japrescott

Reputation: 5015

not tested, but it seams the following should rather be in the jquery.css() style;

.animate(
    {
        left: $("#sky").width()
    },

rewrite to

....
.animate(
    {
        left: $("#sky").width() + "px"
    },....

Upvotes: 0

Related Questions