对于.replaceWith() .call(this) 在实际效果中的不解。

moxiao_lmx 发布于 02/12 10:51
阅读 27
收藏 0

从网上下载的一个jquery文字特效代码,有两处不懂的,请大神教一下。效果显示jQuery基于CSS3文字动画特效

html文件中有

<p class="ex1">TEXTYLE</p>

<p class="ex2">FLIP</p>

js文件中

(function($){  

 $.fn.textyleF = function(options){

   var target = this;

   var targetTxt = target.contents();

   var defaults = {

     duration : 1000,

     delay : 150,

     easing : 'ease',

     callback : null

   };

   var setting = $.extend(defaults, options);

   targetTxt.each(function(){

     var texts = $(this);

     if(this.nodeType === 3){

       mkspn(texts);

     }

   });

   function mkspn(texts){

     texts.replaceWith(texts.text().replace(/(\S)/g,'<span>$1</span>'));

     

   }

   return this.each(function(i){

     var child = target.children('span');

     target.css('opacity',1);

     child.each(function(i){

       $(this).delay(setting.delay*i)

         .queue(function(next) {

         $(this).css({

           display : 'inline-block',

           transform : 'rotateY(0deg) rotateX(0deg)',

           opacity : 1,

           transitionDuration : setting.duration + 'ms',

           transitionTimingFunction : setting.easing

         })

         next();

       });

       if(typeof setting.callback === 'function'){

         $(this).on('transitionend', function() {

          

           setting.callback.call(this);

           

         });

       } else {

         console.error('Textyle.js: `setting.callback` must be a function.');

       }

     });

   });

 };

}( jQuery ));


$(window).on('load',function(){

  $('.ex1').textyleF();

  $('.ex2').textyleF({

      duration : 2000,

      delay : 200,

      easing : 'cubic-bezier(0.77, 0, 0.175, 1)',

      callback : function(){

        $(this).css({

          color : '#fff',

          transition : '1s',

        });

      }

    });

  });

问题1: texts.replaceWith(texts.text().replace(/(\S)/g,'<span>$1</span>'));

    外层的replaceWith()的作用是把括号里的内容替换texts的文本对么?

    但是控制台打印texts,不是<span>T</span>这样的,是Object [ #text ]?

问题2:setting.callback.call(this);

   1、 我对call和this的用法一直没搞懂,这里要实现的效果应该是调用$('.ex2')..textyleF()里设置的callback吧?

    2、那.call(this);在这里作用是什么?前后的this都是HTMLSpanElement。

    3、call()可以改变this的指向?但是在这之前打印this是 。

<span style="display: inline-block; t…ier(0.77, 0, 0.175, 1);">
<span style="display: inline-block; t…or: rgb(255, 255, 255);">
<span style="display: inline-block; t…ier(0.77, 0, 0.175, 1);">
<span style="display: inline-block; t…or: rgb(255, 255, 255);">
<span style="display: inline-block; t…ier(0.77, 0, 0.175, 1);">
<span style="display: inline-block; t…or: rgb(255, 255, 255);">
<span style="display: inline-block; t…ier(0.77, 0, 0.175, 1);">
<span style="display: inline-block; t…or: rgb(255, 255, 255);">
<span style="display: inline-block; t…or: rgb(255, 255, 255);">
<span style="display: inline-block; t…or: rgb(255, 255, 255);">
<span style="display: inline-block; t…or: rgb(255, 255, 255);">
<span style="display: inline-block; t…or: rgb(255, 255, 255);">

 

在此句之后打印this,就没有

<span style="display: inline-block; t…ier(0.77, 0, 0.175, 1);">

所以调用了.call(this)的作用是什么?this指向变了?

问题3:①window.onload == $(window).on('load') ?

            ② $(function($){});== $(document).ready()  ?

            ③ ②在dom树加载完就执行,所以是在①之前执行

            ④ (function($){...})(jquery);是自执行匿名函数?也是在dom加载完运行,那和$(function($){});有区别?

 

 

 

 

 

 

 

 

 

 

 

 

 

 

加载中
返回顶部
顶部