jqueryプラグインのコールバックが動作しない

Question

jQueryのちょっとしたプラグインを作成しています。
テキストを一文字ずつトランジションさせるエフェクトですが、プラグインのコールバックがうまく動きません。
サンプルとして、プラグインエフェクト後にコールバックで一文字ずつテキストカラーを変更しようとしたのですが、コールバック内で$(this)が正常に取得できていないのか、.css()がうまく適用できていない感じです。

何かいい記述の仕方はありますでしょうか。

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

該当のソースコード

<p class="ex1">TEXTYLE</p>
<p class="ex2">TEXTYLE </p>
<p class="desc">- Simple Text Effect -</p>

@import url("https://fonts.googleapis.com/css?family=Heebo:900");
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: .2rem 0 0 0;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Heebo', sans-serif;
  background: #f4f4f4;
}

p {
  margin: 0;
  padding: 0;
  font-size: 7rem;
  line-height: 1;
  letter-spacing: .3rem;
  color: #222;
}
p.desc {
  padding: 1rem;
  font-size: 1rem;
  letter-spacing: .2rem;
  opacity: 0;
  transition: 1.5s 2s;
}

@media screen and (max-width: 450px) {
  p {
    font-size: 3rem;
  }
  p.desc {
    font-size: .5rem;
  }
}
.ex1 {
  opacity: 0;
  perspective: 300px;
}
.ex1 span {
  display: inline-block;
  transform: rotateY(-90deg);
  opacity: 0;
}

.ex2 {
  opacity: 0;
  perspective: 300px;
}
.ex2 span {
  display: inline-block;
  transform: rotateY(-90deg);
  opacity: 0;
}

//////plugin code from here//////
(function($){  
 $.fn.textyle = function(options){
    var target = this;
    var targetTxt = target.contents();
    var defaults = {
          duration : 1500,
          delay : 150,
          easing : 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',
          callback : null
        };
    var setting = $.extend(defaults, options);
    //split txt & wrap txt by span
    targetTxt.each(function(){
      var target = $(this);
      if(this.nodeType === 3){
        mkspn(target);
      }
    });
    function mkspn(elem){
      elem.replaceWith(elem.text().replace(/(\S)/g,'<span>$1</span>'));
    }
    //txt animation
    this.each(function(i){
      var target = $(this);
      var child = target.children('span');
      target.css('opacity',1);
      child.each(function(i){
        $(this).delay(setting.delay*i)
        .queue(function(next) {
          $(this).css({
            transform : 'rotateY(0deg)',
            opacity : 1,
            transitionDuration : setting.duration + 'ms',
            transitionTimingFunction : setting.easing
          })
          next();
        });
        if(setting.callback){
          setting.callback();
        }
      });
    });
    return this;
 };
}( jQuery ));
//////plugin code to here//////


$(window).on('load',function(){
//////code to call//////
  $('.ex1').textyle();
  $('.ex2').textyle({
            duration : 700,
            delay : 200,
            easing : 'swing',
            callback : function(){
              $(this).css({ //この.css()メソッドが適用されず、文字色が変わらない
                color : 'coral',
                transition : '1s',
              });
              $('.desc').css('opacity',1);
            }
          });
});

###やりたいこと

jQueryプラグインのコールバックを実装したい。
①メイン処理内で要素内テキストを一文字ずつ分割してspanで囲む
②エフェクトを一文字ずつに適用
③コールバックで$(this)を用い、分割したテキスト毎に.css()を適用させたい。

###現状

上記③がうまくいかない。
コールバック内で$(this)の値が正常に取得出来ていないのか、.css()メソッドが適用されず文字色が変わらない。

###Codepen

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

Answer 1

コールバック関数のthisを正しく設定できていないことが原因です。
コールバック関数内で各span要素をthisとして扱いたいのであれば、以下のようにします。

child.each(function(i){
  $(this)
    .delay(setting.delay*i)
    .queue(function(next) {...});

  if(setting.callback){
    setting.callback.call(this); // `callback`の`this`を<span>に指定して呼び出す
  }

後々プラグインの完成度を高めたい時の参考までに、setting.callbackが関数のときだけ実行し、そうでなければ警告文をコンソールに表示すると親切です。

if(typeof setting.callback === 'function') {
  setting.callback.call(this);
} else {
  console.error('jQuery.textyle.js: `setting.callback` must be a function.')
}

あと、this.each()のあとに何も処理がなければ、

this.each(function() {...})
return this

のようにバラバラに書くのではなく、以下のようにするのがスマートです。

return this.each(function() {...})

Comments

[myc]

ご回答ありがとうございます！
ご指摘頂いたコードを元にして、最終的にコールバック部分は下記記述で意図通りの挙動になりました。

$(this).on('transitionend', function() {
setting.callback.call(this);
});

また他にもブラッシュアップに繋がるご指摘ありがとうございました。
別でリリースしているプラグインにも活かせそうなので、早速アップデートしたいと思います！

[NozomuIkuta]

質問は、アニメーションが終わったタイミングのコールバックでしたね。失礼しました。
ひとまず、解決したようでよかったです。

[myc]

とんでもないです、大変助かりました。
丁寧なご回答に感動しました。
ありがとうございました。