从网上下载的一个jquery文字特效代码，有两处不懂的，请大神教一下。效果显示jQuery基于CSS3文字动画特效
html文件中有
TEXTYLE
FLIP
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,'$1')); console.log("texts="+texts); } 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', }); $('.desc').css('opacity',1); } }); });
问题1： texts.replaceWith(texts.text().replace(/(\S)/g,'$1'));
外层的replaceWith()的作用是把括号里的内容替换texts的文本对么？
但是控制台打印texts，不是T这样的，是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($){});有区别？ |
天盟APP下载
