css メソッドや animate メソッドを使うと jQuery から簡単に CSS の操作ができます。要素を動いているように見せるには、margin や top、left などのプロパティをピクセル値で指定することになると思いますが、現在の場所からプラス 30px の位置まで動かしたいといった場合や、マイナス 20px の位置まで動かしたいといった場合に便利な記述方法があります。
下記のコードを実行すると Hello という文字列が表示され、その文字列をクリックすると右に 30px 動きます。その「 30px 動かす」動作を相対的なピクセル値を指定して動かしている例となります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ $('#hoge').css('margin-left', 0); $('#hoge').click(function(){ $(this).css({ 'margin-left': '+=30px' }); }); }); </script> </head> <body> <p id="hoge">Hello</p> </body> </html> |
10行目が該当の箇所です。margin-left の値に +=Npx のように記述すると現在の px 値に +Npx した状態にしてくれます。マイナスにしたい場合は -=Npx と書けばOKです。これを知るまではいちいち css メソッドを使って現在の値を取得していたのですが、この方法を利用することで記述量が減りコードが簡潔になって助かっています。