ボタンにホバー(hover)した時にボーダー(border)と文字を左から順に出す方法
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', }); }); });