why this jQuery animation loop doesn't work?

Question

<script>
function swim() {

    $("#ship").animate({left: "-=-540px"}, 3000, function() {

        $("#ship").css("-moz-transform", "scaleX(-1)");
        $("#ship").css("-o-transform", "scaleX(-1)");
        $("#ship").css("-webkit-transform", "scaleX(-1)");
        $("#ship").css("transform", "scaleX(-1)");
        $("#ship").css("filter", "FlipH");
        $("#ship").css("-ms-filter", "FlipH");
        $("#ship").animate({left: "-=540px"}, 3000);
        swim();

        })

    }


    swim();

</script>

When I use only document.ready works fine, but stops after an attempt to turn it to a loop. There must be a syntax bug somewhere but I can't figure out where.

EDIT: nvm. It was the case of putting the script to <head> instead of <body>.

if function(){} you can use this insead of repeating query. — m1k1o
– m1k1o, Commented Aug 12, 2013 at 10:14
missing semicolon at end of $("#ship").... statement. what I don't think that might be the reason. — Aditya Jain
– Aditya Jain, Commented Aug 12, 2013 at 10:15

JJJ · Accepted Answer · 2013-08-12 10:17:11Z

1

There's a reason why it needs the document ready wrapper. A "normal" function isn't an equal replacement for it. If you call the function before the DOM is ready, the #ship selector doesn't match anything, the animation doesn't run, and the callback isn't executed.

Call the function in a document ready event:

$( swim );

answered Aug 12, 2013 at 10:17

JJJ

33.2k20 gold badges95 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

why this jQuery animation loop doesn't work?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related