html文本的操控精确到单个字体的设置

$.fn.textwork = function(){
  var str=''
  for(var i=0;i<this.text().length;i++){
    str +='<span>'+this.text()[i]+'<\/span>'
  }
  this.html(str)
}

$('p').textwork()
$('p span').eq(0).css({
  color:'red'
})

这是一个Jquary小插件，可以把在父元素内的文本块里的文字每个都添加上一个<span>标签，使文字的操控可以区别精确到一个字上。调用时就：

$('div').textwork()  //文字父元素是谁，里面的div就换成谁了

忘了说了，在插件里，this就是那个父元素，并且就是Jquary的元素，不用再$(this)了，错了就。
可以加些特效的：

$.fn.textwork = function(){
  var str=''
  for(var i=0;i<this.text().length;i++){
    str +='<span>'+this.text()[i]+'<\/span>'
  }
  this.html(str)
}

$('p').textwork()

$.fn.boomText = function(type){
  type = type || 'rollIn'
  var i= 0
  showtime=setInterval(function(){
    this.find('span').eq(i).addClass('animated  '+type)
    i++
    if(i >= this.find('span').length){
      clearInterval(showtime)
    }
  },300)
  
}

$('p').boomText('zoomIn')

原理就是用JS操作每个字，让动画效果写在css样式里，只要加上对应的class就可以了，这里，推荐的拿来主义的动画特效的css文件，官网.
需要先引入对应的css文件，其实跟iconfont的原理一样的。这里的动画的选择参数，就是那个type,既然动画，那单个字体的span标签的display就要改了，inline-block,可以提前在css里写好的。