初めて利用させていただきます。よろしくお願いいたします。
現在練習を兼ねて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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/01/02 17:18