KnockoutでシーケンシャルなjQueryアニメーション ref: http://qiita.com/sukobuto/items/252fe0a6615bc79563d9

file7.js

// 生成
var seq = new ko.jqvs.Sequencer( func_array, [group_id] );

// 最初から開始
seq.start();

// 停止
seq.stop();

// 再開
seq.resume();

file8.js

// 配列に挿入する関数の形式
function (next) {
    // 引数 next は次のアニメーションを実行するための関数
    // next(); のように呼び出すことで次の処理を実行できる。
    // アニメーションの完了時に呼び出されるようにするには
    // 次のようにコールバックに指定する。
    $a.animate(
        { width: 100 },
        { complete: next }
    );
}

View

<label>
    <input type="checkbox" data-bind="checked: opened"/>
    Open/Close
</label>

<div class="wrapper" id="a" data-bind="visualState: { opened: opened }">
    <div class="container" id="b">
        <div class="item" id="c"></div>
        <div class="item" id="d"></div>
        <div class="item" id="e"></div>
    </div>
</div>

View(effect-logic)

var $a = $('#a')
  , $b = $('#b')
  , $c = $('#c')
  , $d = $('#d')
  , $e = $('#e')
  , base_duration = 'fast'
  , wrapper_style = {
      shown: {
        width: 240,
        height: 240,
        padding: 20
      },
      hidden: {
        width: 0,
        height: 0,
        padding: 0
      }
    }
  , seq_open = new ko.jqvs.Sequencer([ // オープン用のアニメーションシーケンス
      function(next) { $a.stop().animate(wrapper_style.shown, {complete: next}) },
      function(next) { $b.stop().slideDown(base_duration, next) },
      function(next) { $c.stop().fadeIn(base_duration, next) },
      function(next) { $d.stop().animate({ height: 40 }, {complete: next}) },
      function(next) { $d.stop().animate({ width: 160 }, {complete: next}) },
      function(next) { $e.stop().slideDown(base_duration, next) }
  ], 'seq_group_a')
  , seq_close = new ko.jqvs.Sequencer([ // クローズ用のアニメーションシーケンス
      function(next) { $e.stop().slideUp(base_duration, next) },
      function(next) { $d.stop().animate({ width: 0 }, next) },
      function(next) { $d.animate({ height: 0 }, {completed: next}) },
      function(next) { $c.stop().fadeOut(base_duration, next) },
      function(next) { $b.stop().slideUp(base_duration, next) },
      function(next) { $a.stop().animate(wrapper_style.hidden, {complete: next}) }
  ], 'seq_group_a')
  ;
$('.wrapper')
    .on('jqvs-init', function(e, state) {
        if (ko.unwrap(state.opened)) {
            $a.css(wrapper_style.shown);
        } else {
            $a.css(wrapper_style.hidden);
            $b.hide();
            $c.hide();
            $d.css({ width: 0, height: 0 });
            $e.hide();
        }
    })
    .on('jqvs-changed', function(e, state) {
        ko.unwrap(state.opened)
            ? seq_open.start()   // オープン実行
            : seq_close.start(); // クローズ実行
    });

ViewModel

function ViewModel() {
    this.opened = ko.observable(false);
}
ko.applyBindings(new ViewModel());