47790


ジェイクエリーの1文字ずつのテキストアニメーションで複数行対応する方法で困っています  
splitで1文字ずつ配列にいれてforeachで配列をspanでくくりアニメーションさせているのですが  
brタグなども1文字ずつ格納されてしまうためbrタグは1文字で格納されないようにしたいのですが方法がわかりません  
欲を言えばbrタグのみではなくhtmlタグは1文字で配列に格納されずにしたいです。  
また、foreachで回してspanを取り付ける方法ではなくて  
htmlにspanを書く方法だと簡単に実装できるかと思うのですが毎回1文字ずつspanで囲むのが大変になるので、できればしたくありません。  
初めて投稿するため勝手がわかりませんが、今現在このような感じです。  
どなたかいいやり方ご教授いただけると助かります。  
<https://codepen.io/eqnu7zplnsaq9gl/pen/PBLpPm>

[code]

    $(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");
        });
      });
    
    
    
    
    });
[/code]

[code]

    @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使用サンプルここまで*/
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <p class="text_animate">te<br>st</p>
[/code]


CC BY-SA 4.0
2018-08-13T11:54:16.113
47491
2019-12-13T20:05:29.247
2019-12-13T20:05:29.247
32986
29721
question
javascript html jquery css
jqueryでの1文字ずつのアニメーションについて


splitに正規表現を組み合わせてできるかと思います。  
確認用に以下をご確認くださいませ。  
codepenにあったコードに対して手を加えておりますので。  
そのまま動くかと思います。

[code]

    $(function(){
     var text=$(".text_animate").html();
     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");
     });
     });
     
     
      
     
    });
[/code]

[code]

    /*.text_animate{
     display: none;
    }*/
    .text_animate{
     span{
      transition: 1s;
     opacity: 0;
     &.text_animate_on{
      transition: 1s;
      opacity: 1;
      
     }
     }
     &.text_animate_rotate span{
      transform: rotate(-45deg);
      display: inline-block;
      &.text_animate_rotate_on{
       transform: rotate(0deg);
      }
     }
     &.text_animate_size span{
      font-size: 22px;
      &.text_animate_size_on{
       font-size: 10px;
      }
     }
    }
    /*部分的に変更したいときにextend使用サンプルここから*/
    .test_animate{
     @extend .text_animate;
     &.test_animate_size_on span{
      font-size: 25px;
      &.test_animate_size_on{
       font-size: 15px;
      }
     }
    }
    /*部分的に変更したいときにextend使用サンプルここまで*/
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <p class="text_animate">te<br>st</p>
[/code]


CC BY-SA 4.0
2018-08-24T15:46:27.133
47790
2018-08-24T15:46:27.133
29854
47491
answer