2011年11月23日に投稿

[jQuery]cssメソッドやanimateメソッドで相対的なピクセル値を指定する簡単な方法

cssメソッドやanimateメソッドを使うとjQueryから簡単にCSSの操作ができます。要素を動いているように見せるには、marginやtop、leftなどのプロパティをピクセル値で指定することになると思いますが、現在の場所からプラス30pxの位置まで動かしたいといった場合や、マイナス20pxの位置まで動かしたいといった場合に便利な記述方法があります。

下記のコードを実行するとHelloという文字列が表示され、その文字列をクリックすると右に30px動きます。その「30px動かす」動作を相対的なピクセル値を指定して動かしている例となります。

10行目が該当の箇所です。margin-leftの値に「+=Npx」のように記述すると現在のpx値に+Npxした状態にしてくれます。マイナスにしたい場合は「-=Npx」と書けばOKです。これを知るまではいちいちcssメソッドを使って現在の値を取得していたのですが、この方法を利用することで記述量が減りコードが簡潔になって助かっています。

関連記事

Leave a Reply