縦型メニュー展開・収納時（開閉時）にメニュー横の＋−表示が切替るjQuery

今回の拙サイト全面改修の際追加したメニュー横の＋−表示が切替るjQueryの詳説をば。
実際どのようなものかは、この拙ブログのサイドメニューも同じ仕様なのでご覧あれ。

メニュー右に「＋」を追加して、メニュー展開時にこれが「−」に変わり、メニュー収納時にまた「＋」になるようなメニュー展開・収納jQuery。この「＋」「−」はいわば飾りなのでHTML上には書きたくない、しかしjQueryの特性上、CSSの疑似要素〔:after〕をセレクターとして呼べないこともあって、「＋」「−」の切替え方に難儀。当初、〔toggle(fn1, fn2, ..., fnN)〕を使用しようと考えたがjQuery 1.9からこれが廃止されたことを知り愕然。（詳細はjQuery Core 1.9 Upgrade Guide | jQueryを参照）
他に手はないかと色々調べた結果、jQueryの〔after()〕と〔replaceWith()〕が使えそうと判断。〔after()〕は指定したセレクターの後ろにHTML文字列などを挿入するもの、〔replaceWith()〕は指定したセレクターのHTML文字列などを置換するもの。この2つを組み合わせて「＋」「−」の切替えを可能にした。
以下に使用例を。

HTML

<ul>
 <li><span id="accordion02">works</span>
  <ul id="subNavi02">
   <li><a href="#">web design</a></li>
   <li><a href="#">web demo</a></li>
   <li><a href="#">print</a></li>
   <li><a href="#">letter carving</a></li>
  </ul>
 </li>
</ul>

jQuery

$(function(){
1:  $("#subNavi02").hide();
2:  $("#accordion02").after("+");
3:  $("#accordion02").click(function(){
4:  $("#subNavi02:not(:animated)").animate({height: 'show'}, 500,'easeOutQuad');
5:  $("#accordion02").next().replaceWith("–");
6:  $("#subNavi02:not(:animated)").animate({height: 'hide'}, 500,'easeInQuad', function(){$("#accordion02").next().replaceWith("+");});
 });
});

解説

• 1: はじめはサブナビ部分を隠しておくための〔hide()〕
• 2:「works」の右に「＋」を追加するための〔after("+")〕
• 3,4,5:「works」をクリックすると（3）、サブナビ部分が展開（4）、同時に「＋」が「−」に置換される（5）
• 6: もう一度「works」をクリックするとサブナビ部分は収納され、収納完了後に「−」が「＋」に置換される

実はもう一つのミソが上記6の『収納完了後に「−」が「＋」に置換』。4,5での書き方の場合はクリックと同時に置換されるが、4,6で使用している〔animate(params, [duration], [easing], [callback])〕（コレ自体の解説は以前のエントリ「上下に展開・格納するナビ」をご覧あれ）の〔[callback]〕部分に置換の関数〔function(){$("#accordion02").next().replaceWith("+");}〕を書き込むことで、収納完了後に置換がなされるようになる（らしい）。

以上だが、ここで1つ疑問が。
今回は1つの〔click()〕内に2つの〔animate()〕を挿入しているが、これで何故メニューの展開・収納が上手くいくのか、理屈上よく理解できていない。。。

---