jQuery.Deferred で並列と直列を混ぜる

foo -> [bar, baz] -> foo -> [bar, baz] -> foo の順で実行します。[bar, baz] は並列に実行。

なお、説明のため jQuery.animate() の queue は無効にしておきます。

$el = $('body')
foo = ->
  $el.animate { marginTop: 100, marginLeft: 0 }, { duration: 1000, queue: false }
bar = ->
  $el.animate { marginLeft: 100 }, { duration: 1000, queue: false }
baz = ->
  $el.animate { marginTop: 0 }, { duration: 1000, queue: false }

$.Deferred( (dfd) ->
  dfd
    .pipe(foo)
    .pipe( -> $.when bar(), baz() )
    .pipe(foo)
    .pipe( -> $.when bar(), baz() )
    .done(foo)
).resolve()

var $el = $('body');

function foo() {
  return $el.animate({ marginTop: 100, marginLeft: 0 }, { duration: 1000, queue: false });
}
function bar() {
  return $el.animate({ marginLeft: 100 }, { duration: 1000, queue: false });
}
function baz() {
  return $el.animate({ marginTop: 0 }, { duration: 1000, queue: false });
}

$.Deferred(function (dfd) {
  dfd
    .pipe(foo)
    .pipe(function() {
      return $.when(bar(), baz());
    })
    .pipe(foo)
    .pipe(function() {
      return $.when(bar(), baz());
    })
    .done(foo)
}).resolve();