slideUp、slideDownでstop()を上手く動作させる方法の補足です。文字ばっかなので読むのしんどいと思います。
！この記事はKUMAの勝手な推測で書かれているため、正確さの保証が出来ません。予めご了承ください。
まず、slide系の命令を実行する前とした後の変化に着目します。
jQueryのソースを読みたかったのですが、改行もコメントもないという大変読みにくいソースだったので、値を読み取ることによって内部動作を推察します。
OperaならDragonfly、FireFoxならFirebugというデベロッパー用のデバッグツールがあるので、これらを使うと便利です。
ちなみに、DragonflyはjQueryを使ってcssを書き換えた場合にHTMLの記述が更新され、Firebugでは変更された場所が色分けされます。今回は変更した場所ではなく内容に着目しているので、Dragonflyを使いました。
slide系の命令を実行する前：<div class="menucontent">
実行後(slideUp)：<div class="menucontent" style="overflow-x: hidden; overflow-y: hidden; display: none; height: 120px">
もはやこれを見れば一目瞭然ですが、slide系の命令は縦方向や横方向に文字がはみ出ると表示されないように設定した上で、高さを変えていると考えられます。
Dragonflyでは変化途中のheightも確認することができました。予想通り、displayが元のblockになっており、heightが中途半端な数値になっていました。
元記事で、stop().slideDown("fast")を使うと要素の高さの変化が止まったのは、stopを使った時点で元のheightが変化途中のheightに更新されたからだと思います。実際、元記事の最後のソースのように、heightを元の高さにアニメーションさせるように動作させるとうまくいきました。
また、最初からdisplayをnoneにしている要素にslideUpを行っても要素のCSSは変更されていませんでした。
以上をまとめると、slide系の命令は以下のアルゴリズムに沿っていると考えました。
slideUp()
1.displayがnoneなら終了
2.最初のheightと時間(ms?)を退避。cssのoverflow-xとoverflow-yをhiddenに設定する。
3.現在の時間が(最初の時間+アニメーション時間)を越えている場合、displayをnoneに、heightを最初のheightに更新し、ブレイク。
4.最初の時間からの経過時間を計算し、アニメーション時間を元にheightを計算して更新する。
5.一定時間経過後、3.へ戻る
slideDown()
1.displayがnoneでないなら終了
2.最初のheightと時間(ms?)を退避。cssのoverflow-xとoverflow-yをhiddenに設定する。
3.現在の時間が(最初の時間+アニメーション時間)を越えている場合、displayをnone以外の適切な値に、heightを最初のheightに更新し、ブレイク。
4.最初の時間からの経過時間を計算し、アニメーション時間を元にheightを計算して更新する。
5.一定時間経過後、3.へ戻る
各命令の退避させたheightが取得できればこちらで持っておく必要はないんですけどね。
PR
