jqueryで、要素の表示と非表示の切り替え時、親要素の高さを保ちたい

Jqueryで表示非表示.show、.hideなどのメソッドを使用すると、セレクタが非表示になると思います。
ただ、消したいのは中身だけで、表示エリアは残したいのです。

こちら様のデモページで、ボタンをクリックしてもらうと、親要素も小さくなってしまうのが分かると思います。

そうすると、visibilityを使用して、

javascript
1$('.sample img').css('visibility','hidden'); //非表示
2$('.sample img').css('visibility','visible'); //表示

これで切り替えできるじゃん、ってなりますが、
jqueryの持つエフェクトを使用したいのです。

今やりたいのは、
ある画像のフェードアウトで非表示にして、
その後また画像をスライドで表示させたいです。

javascript
1
2var img= $('.sample img');
3
4img.fadeOut(700,function(){
5        /* この表示と非表示の間に、親要素が一瞬詰まってしまう */
6	img.show('slide');
7});

この問題の解決方法はありますでしょうか。
何か心当たりのある方、解決策のわかる方、是非ご教示お願い致します。

行動規範の内容に同意します

回答2件

ベストアンサー

消したいのは中身だけで、表示エリアは残したいのです。

表示エリアのDOMと、消したい中身のDOMを分けてみてはいかがでしょうか。
下記サイトに、同様の事象についての記載があります。

http://www.jquerystudy.info/reference/effects/fadeOut.html

フェードアウトが完了したらdisplay属性がnoneになります
fadeOutメソッドでフェードアウトした要素はcss設定のdisplay属性がnoneになり表示されなくなります。これはケースによってはレイアウト崩壊の原因になるので注意しましょう。

とあり、同じ現象かと。

赤いdiv要素が上に上がるのを防ぎたい場合は、サンプル（fadeOut/05b.html）のように他のdiv要素で位置を固定します。サンプルfadeOut/05b.htmlでは以下の様にclass属性がfixBoxのdiv要素にフェードする要素を入れることで、フェードする要素が消えてもレイアウトが崩れないようにしています。

とのことです。上記ページのサンプルを見て頂ければと。

また、Lhankor_Mhyさんのサンプルコードにあるように、
hide()を使うのではなく（displayをnoneにするのではなく）、
cssのopacityプロパティを変化させることで非表示にするのではいかがでしょうか。

これは同様に、animateメソッドでcssのopacityを変化させることで同じ動きを実現できます。

$('.img1').animate({ opacity: 0 }, {
	duration: 1000
});

投稿2015/11/17 08:21

ikki57

総合スコア290

sanset

2015/11/18 07:50

詳しい解説ありがとうございます。無事解決できました。ありがとうございます。

行動規範の内容に同意します

javascript
1img.fadeOut({
2    duration: 700,
3    progress: function(dfd, prg, rmn){
4        if( rmn<1 ) $(this).stop().css('opacity','1');
5    },
6});