タイピングで歌詞表示とかしてみてる

明日(というか今日)中に

「前のpタグが終わったら次のpタグのアニメーション開始」

のscript書けたらイイナー

<!DOCTYPE html>
<html>
<head>
<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8" />
	<title> typing</title>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
</head>
<body>
  <p class="type">This was a triumph. </p>
  <p class="type">^^^^^^^^^^^^I'm making a note here: </p>
  <p class="type">^^^^^^^^^^^^HUGE SUCCESS. </p>
  <p class="type">^^^^^^^^^^^^^^^^^^It's hard to overstate </p>
  <p class="type">^^^^^^My satisfaction. </p>
  <p class="type">^^^^^^Aperture Science </p>
  <p class="type">^^^^^^We do what we must </p>
  <p class="type">^^^^^^Because we can. </p>
  <p class="type">^^^^^^For the good of all of us. </p>
  <p class="type">^^^^^^Except the ones who are dead. </p>

  <p class="type">^^^^^^But there's no sense crying </p>
  <p class="type">^^^^^^Over every mistake. </p>
  <p class="type">^^^^^^You just keep on trying </p>
  <p class="type">^^^^^^Till you run out of cake. </p>
  <p class="type">^^^^^^And the Science gets done. </p>
  <p class="type">^^^^^^And you make a neat gun. </p>
  <p class="type">^^^^^^For the people who are </p>
  <p class="type">^^^^^^Still alive. </p>

  <p class="type">^^^^^^I'm not even angry. </p>
  <p class="type">^^^^^^I'm being so sincere right now. </p>
  <p class="type">^^^^^^Even though you broke my heart. </p>
  <p class="type">^^^^^^And killed me. </p>
  <p class="type">^^^^^^And tore me to pieces. </p>
  <p class="type">^^^^^^And threw every piece into a fire. </p>
  <p class="type">^^^^^^As they burned it hurt because </p>
  <p class="type">^^^^^^I was so happy for you! </p>
  <p class="type">^^^^^^Now these points of data </p>
  <p class="type">^^^^^^Make a beautiful line. </p>
  <p class="type">^^^^^^And we're out of beta. </p>
  <p class="type">^^^^^^We're releasing on time. </p>
  <p class="type">^^^^^^So I'm GLaD. I got burned. </p>
  <p class="type">^^^^^^Think of all the things we learned </p>
  <p class="type">^^^^^^For the people who are </p>
  <p class="type">^^^^^^Still alive. </p>

  <p class="type">^^^^^^Go ahead and leave me. </p>
  <p class="type">^^^^^^I think I prefer to stay insclasse. </p>
  <p class="type">^^^^^^Maybe you'll find someone else </p>
  <p class="type">^^^^^^To help you. </p>
  <p class="type">^^^^^^Maybe Black Mesa... </p>
  <p class="type">^^^^^^THAT WAS A JOKE, HA HA, FAT CHANCE. </p>
  <p class="type">^^^^^^Anyway this cake is great </p>
  <p class="type">^^^^^^It's so delicious and moist </p>
  <p class="type">^^^^^^Look at me still talking when there's science to do </p>
  <p class="type">^^^^^^When I look out there </p>
  <p class="type">^^^^^^It makes me glad I'm not you </p>
  <p class="type">^^^^^^I've experiments to be run </p>
  <p class="type">^^^^^^There is research to be done </p>
  <p class="type">^^^^^^On the people who are </p>
  <p class="type">^^^^^^Still alive. </p>


  <p class="type">^^^^^^And believe me I am still alive </p>
  <p class="type">^^^^^^I'm doing science and I'm still alive </p>
  <p class="type">^^^^^^I feel FANTASTIC and I'm still alive </p>
  <p class="type">^^^^^^While you're dying I'll be still alive </p>
  <p class="type">^^^^^^And when you're dead I will be still alive </p>
  <p class="type">^^^^^^Still alive </p>
  <p class="type">^^^^^^Still alive.</p><style>
	p{margin:25px;}
</style>  
<script>

$(".type").each(function() {

    var $this = $(this);
    var str = $this.text();
    $this.empty().show();
    str = str.split("");
    str.push("|");

    // increase the delay to ghostType slower
    var delay = 100;

    $.each(str, function(i, val) {
        if (val == "^") {
            // Do nothing. This will add to the delay.
        }
        else {
            $this.append('<span>' + val + '</span>');
            $this.children("span").hide().fadeIn(100).delay(delay * i);
        }
    });
    $this.children("span:last").css("textDecoration", "blink");
});


</script>
</body>
</html>