jqueryで対象物の位置を変更する場合

今回、ボタンをクリックしてあるボックスの位置を変更させる、という処理をjqueryを使って作りました。

その際、2点ほど気になったので、こちらに書いておきます。

まず、「親子の関係」について。

親子関係を記す場合、「parent > child」というような記述をしますが、これ、単純な親子だけにしか使えないっぽいんです。
要するに「A > B > C」という書き方ではその対象物を指定できない、ということです。

いつもナビゲーションボタンを「ul」「li」を使って作っており、あるボタンをクリックしたら、それ以外のボタン画像は初期表示の画像へ戻す、という処理を作ろうとして、でも構文的な親子関係は「ul > li > img」というようになるので、このような感じで書いたら全く動かず。
ショックに打ちひしがれ考えた代替案が、クラス名を各ボタンに追加し、そのクラス名を指定して画像を変更する、というアイディアでした。
これでなんとかこの件はクリアできました。

次に、「指定の対象物の移動」について。

単純に表示させたり消したり、ということであればhideとかtoggleとかを使えばできるのですが、今回やりたかった動作は「横長の画像を何パターンかの場所へ横へスライドさせる」という処理だったので、animateを使うことにしました。

当然、画像かdivを動かすことになりますが、それはどちらを動かしても特に大きな影響はないので、今回はdivにidをセットすることにしました。

そして、いざ、マニュアルやテンプレートの書き方を見ながら自分で書いてみても全く動かず。
実際に動いているテンプレートのanimateをコピーし、id名を変更しても動く気配がない。
自分なりに結構試行錯誤して書き直したり、Webで調べても解決しなさそうだったので、上司に相談したところ、あっさり解決しました。

原因は「position」でした。

この「position」はもちろんCSSのpositionですが、animateで位置を動かす場合、positionの値を「absolute」にセットしないといけないとのこと。

通常、positionを指定しない場合は値が「static」となるため、animateがきかなかったみたいです。
そして、動かす対象物に「position:absolute;」をセットしたところ、あっさりと動くようになりました。

そして、満足な出来映えとなりました。
めでたしめでたし。

コメントを残す