質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

15415閲覧

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

sanset

総合スコア186

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2015/11/17 06:26

編集2015/11/17 06:40

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});

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

表示エリアの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()を使うのではなく(displaynoneにするのではなく)、
cssのopacityプロパティを変化させることで非表示にするのではいかがでしょうか。

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

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

投稿2015/11/17 08:21

ikki57

総合スコア290

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sanset

2015/11/18 07:50

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

0

javascript

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

当方の環境では動作しましたが、環境によってはrmn<1の部分は調整が必要かもしれません。

投稿2015/11/17 06:48

Lhankor_Mhy

総合スコア35869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sanset

2015/11/18 07:51

ご連絡遅れて申し訳ありません。 先に試してみましたが、上記のコードではうまくいきませんでした。(uiのバージョン?) 素早い回答感謝致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問