jQuery拆分文字显示与隐藏

一款拆分文字显示与隐藏的jQuery特效，可以指定拆分文字的字符串，将文字拆分开来，通过鼠标的页面点击动作来实现文字的显示和隐藏，显示和隐藏的动画效果比较平滑，喜欢的小伙伴们请收下把。

分类：文字特效 > 文字动画难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，先引入jquery.min.js，然后设置好页面元素的样式，代码如下：

body {
  height: 100vh;
  background: -webkit-linear-gradient(75deg, #00a9f1, #cf00f1);
  background: linear-gradient(15deg, #00a9f1, #cf00f1);
  color: #fff;
  position: relative;
}
body:before {
  content: '任意位置点击';
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  font-size: 20px;
  color: white;
  position: absolute;
  z-index: 10;
  right: 18px;
  top: 18px;
}
@media (max-width: 480px) {
  body:before {
    top: auto;
    bottom: 20px;
    right: 20px;
  }
}

h1 {
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  font-weight: 100;
  font-size: 38px;
  line-height: 58px;
  margin: 0;
  padding: 30px;
  text-transform: uppercase;
}
@media (max-width: 700px) {
  h1 {
    padding: 20px;
    font-size: 40px;
  }
}
h1 span {
  display: inline-block;
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1);
  transition: -webkit-transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1);
  transition: transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1);
  transition: transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1), -webkit-transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1);
  -webkit-transform: translate(20%, 100%);
          transform: translate(20%, 100%);
  position: relative;
  z-index: 1;
  letter-spacing: -0.03em;
  text-shadow: 3px 4px 0 rgba(0, 0, 0, 0.1);
  line-height: 58px;
}
h1 span:before {
  content: '';
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: translateY(-40%);
          transform: translateY(-40%);
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1);
  transition: -webkit-transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1);
  transition: transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1);
  transition: transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1), -webkit-transform 0.6s cubic-bezier(0.65, 0.02, 0.23, 1);
}
h1 span.row {
  overflow: hidden;
  line-height: 0.9;
  display: block;
  -webkit-transform: none;
          transform: none;
}
h1 span.row:before {
  display: none;
}
h1 .animate {
  -webkit-transform: translate(0, 0);
          transform: translate(0, 0);
}
h1 .animate:before {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}

页面的body部分，只有一个h1的标签，文字被<br>分开换行，代码如下：

<h1 class="strip">
  你想住在什么样的房子里？<br>
  你想当个百万富翁吗？<br>
  你想拥有什么样的事业呢？
</h1>

页面的底部需要对文字进行拆分，并响应页面的鼠标点击事件，代码如下：

$('.strip').each(function(){
  var $t = $(this),
      rows = $.trim($t.html()).split('<br>');

  $t.html('');

  $.each(rows, function(i, val){
    $('<span class="row"></span>').appendTo($t);

    var letters = $.trim(val).split('');

    $.each(letters, function(j, v){
      v = (v == ' ') ? '&nbsp;' : v;
      $('<span>' + $.trim(v) + '</span>').appendTo($('.row:last', $t));
    });

  });
});

$('body').click(function(){
  for (i = 0; i < $('.strip span').length; i++) {
    (function(ind) {
      setTimeout(function(){
          $('.strip span:not(".row")').eq(ind).toggleClass('animate');
      }, ind * 15);
    })(i);
  }
}).click();