いつもお世話になっております。
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")の記述をしなくても点滅してしまいます。
こちらの解決方法はどうしたらいいでしょうか?
すみませんがご教授していただけるとありがたいです。
よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー