javascript - Showing next input field when filled in using next() -

i attempting show next input field after previous 1 has been filled in. attempt working. if first input filled in, second should appear , first should still viable , on. right now, first input appearing on page load (like want to), after filled in doesn't anything.

here in fiddle if helps

$(function () {         var intro = $('.intro');        intro.on('keypress', function() {          if (intro.filter(function (){return $(this).val().length }).length == intro.length) {              $('input').next('.intro').fadein(500);          }         /* else {              $('.intro').hide();          }*/      });  });

.intro {    display: none;  }  .intro:first-child {display: block;}  .next { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <input id="name" type="text" class="intro">  <input id="email" type="email" class="intro">  <input id="title" type="text" class="intro">      <a class="next">show div</a>

i logged filter output length , intro length, filter output length 1 , intro length 3, why condition not satisfying , didnt come inside loop, can check whether below satisfies requirement

$(function () {         var intro = $('.intro');        intro.on('keypress', function() {          if ($(this).val().length > 0) {              $(this).next('.intro').fadein(500);          }                  /* else {              $('.intro').hide();          }*/      });  });

.intro {    display: none;  }  .intro:first-child {display: block;}  .next { display: none; }

<input id="name" type="text" class="intro">  <input id="email" type="email" class="intro">  <input id="title" type="text" class="intro">