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
