CODEWITHSUNDEEP
javascriptjqueryanimationjquery-animate
huseyin tugrul buyukisik
huseyin tugrul buyukisik

Reputation: 11910

How can I make multiple jQuery animate() calls work one after another?

When I click the "aa" block, both "aa" and "bb" animate at the same time. Does javascript issue animate() functions non-blockingly into separate threads? Or this function is entered multiple times with thousands of callbacks which use blocking-type function calls? How can I make animate() work on items one by one when needed(maybe using a timer could do but do I have to use a timer always?)?

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
    <script>

        function growbits(i,j) {
            $(i).animate({ height: "500px" }); // looks working concurrently
            $(j).animate({ width: "500px"});   // with this one
        };

    </script>
</head>
<body>
    <p id="bb" style="background: #f00; height: 50px; width: 255px; margin: 10px;">asdasd</p>  
    <p id="aa" onclick="growbits(aa,bb);" style="background: #f00; height: 50px; width: 255px; margin: 10px;">
        gfhjjjgfhgkjfhkjtkjyhtkjyhkhfukhgkudfgk

    </p>
</body>
</html>

Ive found the following code in the min.js file:

self.element.animate(
            $.extend(style, top && left ? { top: top, left: left } : {}), {
                duration: o.animateDuration,
                easing: o.animateEasing,
                step: function() {

                    var data = {
                        width: parseInt(self.element.css('width'), 10),
                        height: parseInt(self.element.css('height'), 10),
                        top: parseInt(self.element.css('top'), 10),
                        left: parseInt(self.element.css('left'), 10)
                    };

                    if (pr && pr.length) $(pr[0]).css({ width: data.width, height: data.height });

                    // propagating resize, and updating values for each animation step
                    self._updateCache(data);
                    self._propagate("resize", event);

                }
            }
        );

Upvotes: 0

Views: 1075

Answers (2)

DRobinson
DRobinson

Reputation: 4471

Quentin's answer works, but these days I would suggest that it might be cleaner using the options version:

.animate( properties, options )

As such:

javascript function growbits(i,j) { $(i).animate({ height: "500px" }, { duration: 400, done: function () { $(j).animate({ width: "500px"}); } }); };

(done can be replaced by (the old option) complete, or always; always, done, and fail are the now-popular Promise events)

EDIT: Just to clarify, the reason I suggest this is three-fold:

1) You don't need to provide attributes that don't matter to you (in this case, easing),

2) If you decide other attributes matter, they're often trivial to add,

3) (Most importantly) when you're editing the code later you'll understand exactly what the nested function is for without having to think about it.

Upvotes: 1

Quentin
Quentin

Reputation: 943108

From the jQuery documentation:

.animate( properties [, duration ] [, easing ] [, complete ] )

complete
Type: Function()
A function to call once the animation is complete.

So:

function growbits(i,j) {
    $(i).animate({ height: "500px" }, {}, 400, function () {
        $(j).animate({ width: "500px"});
    });

};

Upvotes: 3

Related Questions