ボタンにホバー(hover)した時にボーダー（border）と文字を左から順に出す方法

demoデモページ

html

<div id="splash">
  <span id="id_names">random title</span>
  <div class="slider_top"></div>
  <div class="slider_right"></div>
  <div class="slider_left"></div>
  <div class="slider"></div>
</div>

css

.slider {
    position: absolute;
    display:block;
    right: 0;
    top:100%;
    margin:0 auto;
    height: 1px;
    background-color: #000;
    width: 0%;
    transition: 1s;
}
.slider_top {
    position: absolute;
    display:block;
    left: 0;
    top:0%;
    margin:0 auto;
    height: 1px;
    background-color: #000;
    width: 0%;
    transition: 1s;
}
.slider_right {
    position: absolute;
    display:block;
    right: 0;
    top:0%;
    margin:0 auto;
    height: 0%;
    background-color: #000;
    width: 1px;
    transition: 1s;
}
.slider_left {
    position: absolute;
    display:block;
    left: 0;
    bottom:0%;
    margin:0 auto;
    height: 0%;
    background-color: #000;
    width: 1px;
    transition: 1s;
}

/*hover */
#splash:hover > .slider {
    width: 100%;
}
#splash:hover > .slider_top {
    width: 100%;
}
#splash:hover > .slider_right {
    height: 100%;
}
#splash:hover > .slider_left {
    height: 100%;
}


#splash {
    width: 150px;
    height:100%;
    margin:  0 auto;
    position:  relative;
    opacity: 0;
    transition:1s;
}
#id_name {
    color:#000;
    font-family:'Arial-BoldMT';
    font-weight:bold;
    font-size:50px;
    letter-spacing: -2px;
    display:block;
    margin:0 auto;
    width: 317px;
    position:  relative;
    opacity: 0;
}
#id_name span {
   font-weight:bold;
    font-size:20px; 
}

js

$(function(){


  //マウスを乗せたら発動
  $('#splash').hover(function() {
 
   //#idの中の文字を取得 (文字列は配列扱い)
   //その文字を一つずつ分解し、spanで囲う
   //#idの中の物を入れ替える
   $(this).css({ 
      'opacity':'1',
      'transition':'1s',
   });
   $('#id_name').css({ 
      'opacity':'1',
      'transition':'1s',
   });

   var chars = $('#id_name').text();
   console.log(chars);

   var replace_chars = '';
   for (var i in chars) {
     replace_chars += '<span style="opacity:0; ">'+chars[i]+'</span>';
   }
   $('#id_name').html(replace_chars);

   $('#id_name').find('span').each(function(index){
     $(this).delay(index * 60).animate({opacity:1});
   });

  
  }, function() {
   //ここにはマウスを離したときの動作を記述
    $(this).css({ 
      'opacity':'0',
      'transition':'1s',
   });
 
  });



});

category cloud