$("h4").each(function() { var $this = $(this); var str = $this.text(); $this.empty().show(); str = str.split(""); str.push("|"); var delay = 100; $.each(str, function(i, val) { if (val == "^") { } else { $this.append('<span>' + val + '</span>'); $this.children("span").hide().fadeIn(100).delay(delay * i); } }); $this.children("span:last").css("textDecoration", "blink"); });
.hidden{ display: none; } .demo1{ width: 350px; margin: 0 auto; text-align: center; background-color: #b2e2db; color: #666; padding: 10px 0; border: 15px #eee solid; text-shadow: 0 -1px 0 rgba(0, 0, 0, .1); margin-bottom: 40px; background-size: 350px; cursor: pointer; } .demo1 > h1{ text-transform: uppercase; letter-spacing: -2px; font-size: 70px; line-height: 2; } .demo1 > h4{ font-size: 30px; line-height: 0; margin-bottom: 60px; } .demo{ cursor: pointer; }
<div class="demo1"> <h1>CLICK ME</h1> <h4>my name is kachibito.</h4> </div>