アニメーション動作をしながらサイズ変化するボックス

jQuery UI の Resizable プラグインを使った、ドラッグ＆ドロップでサイズを変更できるボックスにおいて、大きさを変更するとき、アニメーション動作をしながら、サイズを変化させるには、animate オプションを使う。
大きさを変更するとき、ドット・ボーダーのボックスが現れるので、ドット・ボーダーのボックスの大きさを変更し、ドロップすると、後から追いかけるように、実際のボックスのサイズが、アニメーション動作をしながら拡大縮小する。

実装例（サンプル）

実装例の動作について

• ボックスの右端にカーソルを合わせると、カーソルが左右リサイズ用カーソル形状に変わる。ドラッグして左右に動かすと、ドット・ボーダーのボックスが現れるので、ドット・ボーダーのボックスの幅を変更し、ドロップすると、後から追いかけるように、実際のボックスの幅がアニメーション動作をしながら変化する。
• ボックスの下端にカーソルを合わせると、カーソルが上下リサイズ用カーソル形状に変わる。ドラッグして上下に動かすと、ドット・ボーダーのボックスが現れるので、ドット・ボーダーのボックスの高さを変更し、ドロップすると、後から追いかけるように、実際のボックスの高さがアニメーション動作をしながら変化する。
• ボックスの右下端にカーソルを合わせると、カーソルが左上右下リサイズ用カーソル形状に変わる。ドラッグして左上か右下へ動かすと、ドット・ボーダーのボックスが現れるので、ドット・ボーダーのボックスの大きさを変更し、ドロップすると、後から追いかけるように、実際のボックスの大きさがアニメーション動作をしながら変化する。

実装例のソースコード

読み込み

読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。

まとめて読み込む場合

個別に読み込む場合

JavaScript

CSS

HTML