ジェイクエリーの1文字ずつのテキストアニメーションで複数行対応する方法で困っています
splitで1文字ずつ配列にいれてforeachで配列をspanでくくりアニメーションさせているのですが
brタグなども1文字ずつ格納されてしまうためbrタグは1文字で格納されないようにしたいのですが方法がわかりません
欲を言えばbrタグのみではなくhtmlタグは1文字で配列に格納されずにしたいです。
また、foreachで回してspanを取り付ける方法ではなくて
htmlにspanを書く方法だと簡単に実装できるかと思うのですが毎回1文字ずつspanで囲むのが大変になるので、できればしたくありません。
初めて投稿するため勝手がわかりませんが、今現在このような感じです。
どなたかいいやり方ご教授いただけると助かります。
https://codepen.io/eqnu7zplnsaq9gl/pen/PBLpPm
$(function() {
var text = $(".text_animate").html();
/*var html_tags = /<\/?[^>]+>/;
var text_split=text.split(html_tags);*/
var text_split = text.split("");
$(".text_animate").html("");
function animate() {
text_split.forEach(function(val) {
/*console.log(val);*/
$(".text_animate").append("<span>" + val + "</span>");
});
}
animate();
$(window).load(function() {
$(".text_animate span").each(function(index) {
$(this).css({
transitionDelay: index * 0.6 + "s"
}).addClass("text_animate_on");
});
});
});
@charset "UTF-8";
/*.text_animate{
display: none;
}*/
.text_animate span,
.test_animate span {
transition: 1s;
opacity: 0;
}
.text_animate span.text_animate_on,
.test_animate span.text_animate_on {
transition: 1s;
opacity: 1;
}
.text_animate.text_animate_rotate span,
.text_animate_rotate.test_animate span {
transform: rotate(-45deg);
display: inline-block;
}
.text_animate.text_animate_rotate span.text_animate_rotate_on,
.text_animate_rotate.test_animate span.text_animate_rotate_on {
transform: rotate(0deg);
}
.text_animate.text_animate_size span,
.text_animate_size.test_animate span {
font-size: 22px;
}
.text_animate.text_animate_size span.text_animate_size_on,
.text_animate_size.test_animate span.text_animate_size_on {
font-size: 10px;
}
/*部分的に変更したいときにextend使用サンプルここから*/
.test_animate.test_animate_size_on span {
font-size: 25px;
}
.test_animate.test_animate_size_on span.test_animate_size_on {
font-size: 15px;
}
/*部分的に変更したいときにextend使用サンプルここまで*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<p class="text_animate">te<br>st</p>