jQueryトランジションを同時に発生させたい

初めて利用させていただきます。よろしくお願いいたします。

現在練習を兼ねてjQueryのちょっとしたプラグインを作成しています。
テキストを一文字ずつトランジションさせるエフェクトですが、取得した複数のjQueryオブジェクトのトランジションを同時に発生させたいと思っています。

現状、同時ではなく順番にトランジション処理されてしまう状態なのですが、何かいい記述の仕方はありますでしょうか。

お知恵をお借りできると嬉しいです。

該当のソースコード

html
1<p class="textyle">TEXTYLE</p>
2<p class="textyle">TEXTYLE</p>

css
1@import url('https://fonts.googleapis.com/css?family=Heebo:900');
2
3html,body {
4  width : 100%;
5  height : 100%;
6  margin : 0;
7  padding : 0;
8}
9
10body {
11  display : flex;
12  flex-direction : column;
13  align-items : center;
14  justify-content : center;
15  font-family: 'Heebo', sans-serif;
16  letter-spacing : .3rem;
17}
18p {
19  margin : 0;
20  padding : 0;
21}
22
23.textyle {
24  font-size : 5rem;
25  opacity: 0;
26  span {
27    opacity: 0;
28  }
29}

js
1(function ( $ ) {
2 $.fn.textyle = function() {
3    
4    var targetTxt = this.contents();
5    var dlTime = 150;
6    var fxTime = 500;
7
8    //split txt & wrap txt by span
9    targetTxt.each(function() {
10      if(this.nodeType === 3) {
11        mkspn($(this));
12      }
13    });
14    function mkspn(elem){
15      elem.replaceWith(elem.text().replace(/(\S)/g,'<span>$1</span>'));
16    }
17
18    //txt animation
19    this.css({'opacity':1});
20    var len = this.children().length;
21    for (var i = 0; i < len; i++) {
22      this.children('span:eq('+i+')')
23        .delay(dlTime*i)
24        .animate({
25          opacity : 1,
26        },fxTime);
27    };
28    return this;
29   
30 };
31}( jQuery ));
32
33$(".textyle").textyle();

###やりたいこと

二つのp要素のトランジションを同時に開始させたい。

###現状

一つ目のp要素 → 二つ目のp要素にトランジションしてしまう。

###Codepen

https://codepen.io/mycreatesite/pen/vvpmgy

行動規範の内容に同意します

回答1件

ベストアンサー

js
1(function ( $ ) {
2 $.fn.textyle = function() {
3
4    var targetTxt = this.contents();
5    var dlTime = 150;
6    var fxTime = 500;
7
8    //split txt & wrap txt by span
9    targetTxt.each(function() {
10      if(this.nodeType === 3) {
11        mkspn($(this));
12      }
13    });
14    function mkspn(elem){
15      elem.replaceWith(elem.text().replace(/(\S)/g,'<span>$1</span>'));
16    }
17
18    //txt animation
19    this.css({'opacity':1});
20    this.each(function() {/* ADD */
21        var len = $(this).children().length;
22        for (var i = 0; i < len; i++) {
23          $(this).children('span:eq('+i+')')
24            .delay(dlTime*i)
25            .animate({
26              opacity : 1,
27            },fxTime);
28        };
29    });/* ADD */
30    return this;
31
32 };
33}( jQuery ));
34
35$(".textyle").textyle();
36```**動くサンプル：**[https://jsfiddle.net/op7z0vmh/](https://jsfiddle.net/op7z0vmh/)