今回は、jQueryのanimate()メソッドを使って、あるエリアを2段階で移動させる方法を解説します。2段階移動というと、信号の2段階右折を思い浮かべる方もいるかもしれませんね。 この記事では、アニメーションの最初のステップとして横方向に動かし、その後縦方向に動かすという2段階のアニメーションを行います。jQueryのアニメーション処理を使って、Webページに動きをつけたいと考えている方にはとても参考になる内容となっています。 ボックスエリアの移動を実現するためのCSSの記述 まずは、アニメーションで動かすボックスエリアのCSSを設定しましょう。ここでは、IDがBoxの要素を移動させるためのCSSを書いています。もちろん、スタイルは自由に変更できるので、デザインに合わせてアレンジしてください。 <style type="text/css"> <!-- body { font-famil
