css3 動畫的使用

demo-1

$.fn.boomText = function(type){
  type = type || 'rollIn'
  this.html(function(){
    var arr = $(this).text()
    .split('').map(function(word){
        return '<span class="boomText"  style="display:inline-block">'+ word + '</span>'
    })
    return arr.join('')
  })
  
  var index = 0
  var $boomTexts = $(this).find('span')
  var clock = setInterval(function(){
    $boomTexts.eq(index).addClass('animated ' + type)
    index++
    if(index >= $boomTexts.length){
      clearInterval(clock)
    }
  }, 300)
}

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

http://js.jirengu.com/zuvar/2/edit?js,output

參考鏈接

https://github.com/daneden/animate.css

https://daneden.github.io/animate.css/