Like!
hoverするとテキストが1文字ずつ表示されるようにしたい
解決したいこと
「hoverによる効果の付け外しがうまくいかない」
デフォルト：メニューの頭文字だけ見えている状態
hover時：1文字ずつ表示される
というナビゲーションメニューを作っています。
例）hoverすると 「A → ABOUT」 になる
hoverを外すと 「ABOUT → A」 になる
hoverすると1文字ずつ表示されるようjQueryで記述しているのですが、
動作が完了する前にhoverを外すと、
例）「AOT」
など一部の文字だけが表示されたり、全単語表示されたままになってしまいます。
この現象の解決方法を教えていただきたいです。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="/style-class.css" />
<meta name="robots" content="noindex">
</head>
<body>
<p class="eachTextAnime">テキストが1文字ずつ出てきます</p>
<div class="flex">
<p><a href="" class="aaa"><span>A</span><span>B</span><span>C</span><span>D</span></a></p>
<p><a href="" class="aaa"><span>R</span><span>E</span><span>C</span><span>R</span><span>U</span><span>I</span><span>T</span></a></p>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="/script-class.js"></script>
</body>
</html>
CSS
p {
text-align: right;
margin: 20px 0;
font-size: 1.5rem;
word-break: break-all;
}
.flex {
display: flex;
flex-direction: column;
}
.aaa {
display: inline-block;
padding: .5em;
}
.aaa span:not(:first-child) {
display: none;
}
.aaa span.appear {
display: inline;
}
JS
// hoverで表示きりかえアニメーション
$('.aaa').hover(
function () {
// 要素にマウスを載せたときの処理
var $thisChild = $(this).children();
var delay = 10;
$thisChild.each(function (i) {
var $this = $(this);
$this.delay(i * delay).queue(function (next) {
$this.addClass('appear');
next();
});
});
},
function () {
// 要素からマウスをはなした
var thisChild = $(this).children();
thisChild.removeClass('appear');
}
);
0
3Answer
2
力技ですがCSSだけでも1文字ずつ表示も可能かと思います。（等幅フォントである必要がありますが……。）以下参考です。
See the Pen qiita-questions-782a957eb2d70a9db35c by _y_s (@ys-j) on CodePen.
Like!
Comments
@hyacca
Questionerご返信が遅くなり、申し訳ございません。
たしかに等幅であれば、CSSでもできますね！
今回はJSで実装しましたが、次回似たものを作る際は、こちらの方法も試してみます。
ありがとうございます！
表示が完了する前にhoverを外すと、「appear」を全削除の処理の後に「apeear」を追加する処理が走ることになって文字が残ってしまっていますね。
「disappear」クラスを追加
hover時は「appear」「disappear」を全削除して、１文字ずつ「appear」を付与
hoverを外した時は「disappear」を全付与
とすると、
「disappear」がない かつ 「appear」がある と文字が表示される状態になるので、
表示が完了する前にhoverを外しても文字が残る現象は解消されると思います。
Like!
Comments
@hyacca
Questionerありがとうございます！
こちらの方法を試し、無事動くようになりました。
spanを自動でつけたり、位置を揃えたりなどまだまだ問題はありますが、
ひとまずなんとかなりそうです。
大変助かりました。本当にありがとうございます！