jQueryのhide,showで中の要素がスライドしてしまう

<li>テキストテキストテキストテキスト
<div><img src="・・・"></div></li>

のような形で、

$('li div').hide();
$('li div').click(function(){
if('li div'が閉じていたら){
$('li div').show("fast");
}
if('li div'が開いていたら){
$('li div').hide("fast");
}
}

としています。
テキスト自体は常に表示していて、クリックされたら画像を表示するようにしたいのですが、
hide,show自体は問題ないのですが、中の画像が、liの幅に対して短く、センタリングしている状態なのですが、hide→showの際は、liの左端から来て真ん中で止まるようなスライドするアニメーションをします。
show→hide の際は、真ん中から左に移動するような動きをします。

この、中の画像をスライドしないようにしたいのですが、どうすればいいのでしょうか。
showやhideにオプションもなさそうなのですが、なぜこのような動きをするのかよくわからず。

よろしくお願いします。
※toggleは使えない理由があります。

No.2 ベストアンサー 回答者： DoubtOwl 回答日時： 2015/02/02 14:55

show,hideの仕様です。

animateを使いましょう。

$('li div').animate({ height: 'show' }, "fast");
$('li div').animate({ height: 'hide' },"fast");

これで縦方向に表示・非表示されます。

この回答へのお礼

お〜
ありがとうございます。
まさにやりたかったことでした。
http://jsbin.com/womatipawi/1/edit?html,css,js,o …
この方法は試して動かなかったので諦めてましたが、指定を間違っていたようです。
ありがとうございました。

お礼日時：2015/02/02 15:07

No.1 回答者： fujillin 回答日時： 2015/02/02 14:16

よくわかってませんが・・・

＞$('li div').click(function(){～～
となっているので、そもそも
＞if('li div'が閉じていたら){～～
は動作しないと思いますが・・・
（閉じていたらクリックできないので）


現状がどのようにレイアウトしているのかわからないので、以下は全くの想像ですが・・・
例えばhide()の際の動作として、中の画像が移動せずに、全体が右・下からトリミングされてゆくような動作をお望みなのでしょうか？

想像では、レイアウトをdiv要素に相対的に行っているので、アニメーション中にレイアウトが変わるのではないかと思います。
jQueryのshow()、hide()では基本的に対象要素のwidth、height、opacityを変えることでアニメーションしていますので、それらの内容（値）が変化しても、レイアウトがお望みの状態に保たれるようにしておけば宜しいのではないかと想像します。

例えば、アニメーションするdivの内側に固定サイズのdivを設定しておいて、その中で相対的なレイアウトをするなどの方法にすればよいのかも知れません。
（どうしたいのかがよくわからないので、あくまでも想像です）

この回答へのお礼

ありがとうございます。
試しに作ってみたらtoggleでも再現しました。
http://jsbin.com/noqeqikaya/1/
コードは
http://jsbin.com/noqeqikaya/1/edit?html,output
これはjQueryのデフォルトの動きであると言えると思いますので、ご指摘の通り、他の動きでごまかそうと思います。

あまり回答に関係ないところですが、
>となっているので、そもそも
>＞if('li div'が閉じていたら){～～
>は動作しないと思いますが・・・

の箇所は、フラグみたいなものを用意しており、1だったら開く、0だったら閉じる、みたいなことを簡単に説明していました。
わかりづらくて申し訳ありませんでした。

お礼日時：2015/02/02 15:03