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

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

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

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

Q&A

解決済

2回答

545閲覧

Jqueryのタブ切り替えにfadeInを付けたい

extliger

総合スコア30

jQuery

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

0グッド

1クリップ

投稿2017/07/04 03:27

編集2017/07/04 07:08

いつもご教授頂きありがとうございます。
今回はJqueryでの動作についてお聞きしたいのですが、
タブを実装するにあたり下記コードを導入しました。

$(function(){ $('#tab-menu li').on('click', function(){ if($(this).not('active')){ $(this).addClass('active').siblings('li').removeClass('active'); var index = $('#tab-menu li').index(this); $('#tab-box .tab').eq(index).addClass('active').siblings('.tab').removeClass('active'); } }); });

.tabにdisplay:noneが入っており、.activeにはdisplay:blockが入っています。
動作としてはちゃんと動くのですが
これにfadeIn動作を加えたいのですがどのように入れても希望したとおり動いてくれません。

これをどう改変すればfadeInでコンテンツが出現するのでしょうか?

何卒お力を借りれましたら助かります。
よろしくお願い致します。

追記です。
ご回答くださいましてありがとうございます。

説明足らずで申し訳ありません。

CSSは下記のようになっています。

#tab-menu { width: 425px; list-style: none; margin-left: auto; margin-right: auto; margin-bottom: 50px; } #tab-menu li { display: inline-block; color: #333; border-left: 1px #333 solid; cursor: pointer; padding-top: 1px; padding-left: 25px; padding-right: 25px; padding-bottom: 1px; } #tab-menu li.active { color: #333; cursor: pointer; text-decoration: underline; } #tab-menu li:last-child{ border-right: 1px #333 solid; } #tab-box .tab { display: none; } #tab-box .active { display: block; }

HTMLは下記です。

<ul id="tab-menu"> <li class="active">コンテンツ1</li> <li>コンテンツ2</li> </ul> <div id="tab-box"> <div class="tab active">中身1</div> <div class="tab">中身2</div> </div>

これで導入しますと普通にタブとして機能します。
これにfadeIn fadeOutのアニメーションを足したいです。

説明がわかりづらくて申し訳ありません。

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

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

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

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

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

guest

回答2

0

fadeInではdisplay:blockが設定されますので、
addClass('active')が不要なのではないでしょうか?

javascript

1$('#tab-box .tab').eq(index).fadeIn()

投稿2017/07/04 03:42

mr-hisa-child

総合スコア294

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

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

extliger

2017/07/04 07:51

ご回答くださりましてありがとうございました!
guest

0

ベストアンサー

単純に考えれば一度けしてfadeInするとかでしょうか?
activeクラスの状況しだいでしょうね、z-indexで調整しているのでしょうか?

追記

fadeInがつけるdisplay:blockを強制的に削除すればよいようですね

javascript

1 $('#tab-box .tab').eq(index).fadeIn().css('display','').addClass('active').siblings('.tab').removeClass('active'); 2

投稿2017/07/04 03:35

編集2017/07/04 07:36
yambejp

総合スコア114572

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

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

extliger

2017/07/04 07:09 編集

そうでございます。単純にこれにfadeIn fadeoutをつけて アニメーションを付けた切り替えをしたいだけでございます。 内容をさらに追記させて頂きました。
yambejp

2017/07/04 07:37

確認して追記しました。 fadeInはタグ自体にstyleを書き込むので、無駄な情報をはずす処理を入れて下さい
extliger

2017/07/04 07:50

丁寧にご指示くださりありがとうございます! 無事動作いたしました。 貴重なお時間を割いて頂きましてありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問