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

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

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

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

jQuery

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

Q&A

解決済

2回答

1139閲覧

jsでの挙動不具合について

spectator

総合スコア8

JavaScript

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

jQuery

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

0グッド

1クリップ

投稿2018/01/13 12:15

編集2018/01/13 13:05

いつもお世話になっております。

jsでの挙動について、うまくいかないのでご質問させていただきます。
やりたいこととしては要素にホバーした時に、要素がフェードで入れ替わると言うものです。

###html

<div class="fade-wrap">          <div class="after"> <div class="box"> <article class="on"> <p class="txt-v">テキテキ</p> </article> <article class="on"> <p class="txt-v">テキテキ</p> </article> <article class="on"> <p class="txt-v">テキテキ</p> </article> <article class="on"> <p class="txt-v">テキテキ</p> </article> </div> </div> <div class="before"> <div class="box"> <article class="off"> <h2 class="ryo txt-v">テキテキ</span></h2> </article> <article class="off"> <h2 class="ryo txt-v">テキテキ</h2> </article> <article class="off"> <h2 class="ryo txt-v">テキテキ</h2> </article> <article class="off"> <h2 class="ryo txt-v">テキテキ</h2> </article> </div> </div> </div>

###css

.fade-wrap { height: 750px; } .fade-wrap .before { /*background: url(../img/bar/course_image_01.jpg) no-repeat center top;*/ position: relative; top: -800px; letter-spacing: -0.4em; min-height: 720px; padding-top: 30px; width: 100%; overflow: visible!important; } .fade-wrap .before .off { float: right; letter-spacing: 6px; width: 30px; height: 500px; text-shadow: 0 0 5px #000, 0 0 5px #000; overflow: visible!important; } .fade-wrap .before .off:nth-child(1) { margin-right: 102px; } .fade-wrap .before .off:nth-child(2) { margin-right: 213px; } .fade-wrap .before .off:nth-child(3) { margin-right: 233px; } .fade-wrap .before .off:nth-child(4) { margin-right: 224px; } .fade-wrap .before h2 .combine, .fade-wrap .after p .combine { -webkit-writing-mode: horizontal-tb; -moz-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb; letter-spacing: 2px; display: inline-block; line-height: 1.5; } .fade-wrap .before h2 .price { font-size: 80%; } .fade-wrap .after { /*display: none;*/ /*position: relative; top: -800px;*/ background: url(../img/bar/course_image_01.jpg) no-repeat center top; letter-spacing: -0.4em; min-height: 780px; padding-top: 20px; width: 100%; } .fade-wrap .after .on { background-color: rgba(0,0,0,0.8); float: right; letter-spacing: 1px; min-height: 380px; padding: 2%; } .fade-wrap .after .on:nth-child(1) { margin-right: 21px; } .fade-wrap .after .on:nth-child(2) { margin-right: 52px; } .fade-wrap .after .on:nth-child(3) { margin-right: 65px; } .fade-wrap .after .on:nth-child(4) { margin-right: 42px; }

###jquery

$('.off').mouseenter(function(e){ $(e.currentTarget).hide().fadeOut("slow"); $('.on').show().fadeIn("slow"); }).mouseleave(function(e){ e.stopPropagation(); $('.on').hide(); $('.off').show(); });

.hideに対して.fadeOut("slow")を記述したところ、ホバーすると点滅してしまいます。
.fadeOut("slow")の記述をしなくても点滅してしまいます。
こちらの解決方法はどうしたらいいでしょうか?
すみませんがご教授していただけるとありがたいです。
よろしくお願いします。

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

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

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

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

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

jun68ykt

2018/01/13 12:21

こんにちは。このようなアニメーション的なUIを実現したいご質問の場合、もし可能であれば現時点で出来ているものをjsfiddle に上げて頂けると、「何を実現したいのか」が明確になり、有用な回答を早くもらえると思います。
spectator

2018/01/13 12:59

ご返信ありがとうございます。質問内容を編集しました。
guest

回答2

0

ベストアンサー

素直にhoverでいいのでは?
fade系はdisplay:none;を適用するため今のような別々divでfloat:right;でデザインしてある場合
要素が消えた途端に回り込むため安定しないと思うんですが、.beforeと.afterがごっそり入れ替わるのか
.onに対応した.offに入れ替わるのかがよくわかりません。

後者だと仮定した場合

floatでデザインしてあるのでfadeは止めて透明度(opacity)でアニメーションしています。

javascript

1$('.off').hover(function(){ 2 // 何番目の.offか取得 3 var idx = $('.off').index(this); 4 // 同じ順番の.onの透明度を0.8にする(1秒間のアニメーションでfadeInの代わり) 5 $('.on').eq(idx).animate({opacity: 0.8}, 1000); 6 // 自分の透明度を0にする(1秒間のアニメーションでfadeOutの代わり) 7 $(this).animate({opacity: 0}, 1000); 8 9},function(){ 10 // 逆の手順 11 var idx = $('.off').index(this); 12 $('.on').eq(idx).animate({opacity: 0}, 1000) 13 $(this).animate({opacity: 1}, 1000); 14});

投稿2018/01/13 15:28

編集2018/01/13 15:29
sousuke

総合スコア3828

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

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

spectator

2018/01/13 15:49

拙い質問にご丁寧に教えてくださり、ありがとうございます。 >.beforeと.afterがごっそり入れ替わるのか.onに対応した.offに入れ替わるのかがよくわかりません。 こちらは回答者様の仮定の通り、「.onに対応した.offに入れ替わる」と言う認識でした。 いただいたソースを記述したところ、理想通りの動きを表現することができました。 誠にありがとうございます。 大変申し訳ないのですが、重ねてもう一点ご質問があります。 ページが表示されてホバーするまで、.on.offどちらも表示されてしまっているのですが、 ページが表示された時に.offのみを表示させるにはどうしたらよろしいでしょうか? もしお時間があればご教授いただきたいです。 すみませんがよろしくお願いします。
sousuke

2018/01/13 16:11

私のサンプルでは.after .onのcssにopacity:0;を設定してます。それで最初から片側を透明にしています。 それにともなって background-color: rgba(0,0,0,0.8);→background-color: rgb(0,0,0); となっています。rgbaの4つ目も透明度を指定するものですので。 それとjqueryはセレクタで書いたものすべてが同時に発動します。提示のコードのように$('.on').show()などとすると4つの.onがすべてshowする結果になるので注意してください。
spectator

2018/01/13 16:25

ご回答者様 ありがとうございました! 無事解決しました。 jqueryにほとんど触ったことがないため、質問自体もわかりにくかったとは思いますが、 アドバイスまでしていただき本当にありがとうございます。 今後の糧にしていきます。
guest

0

書いてあるものだけを表示すると崩れるのでよくわかりませんが、
mouseentere.hideしているので消える
→消えたのでmouseleaveが発生する
→マウスオーバーして消えた要素が復活する
→復活したのでまたmouseenterが発生する

という感じではないでしょうか。
mouseleave.onに適用すればましになるかもしれません。

もう1点、
.hide().fadeOut("slow");.hide()は不要です。
hide()をすると直ちに要素が非表示になります。
hide()の後にfadeout()しても、すでに消えているため何もしないようになってしまうはずです。

投稿2018/01/13 14:26

編集2018/01/13 14:29
moredeep

総合スコア1507

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

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

spectator

2018/01/13 15:52

拙い質問にご丁寧に教えてくださり、ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問