可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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

                }
            }
        );

回答1:

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

};

回答2:

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.