Fill in the blank

by sptx457

HTML

<div class='text'>
  I am a 
</div>
<div class='blank_space blank1'>
  <ul id='gender'>
    <li>boy</li>
    <li>girl</li>
  </ul>
</div>
<div class='text'>
  who is 
</div>
<div class='blank_space blank2'>
  <ul id='occupation'>
    <li>in high school</li>
    <li>working</li>
  </ul>
</div>

CSS

.blank_space {
  border-bottom: 1px solid black;
  position: relative;
  height: 20px;
  overflow: hidden;
}

.blank1 {
  width: 70px;
}

.blank2 {
  width: 100px;
}

.text, 
.blank_space {
  display: inline-block;
}

ul {
  margin: 0px;
  list-style-type: none;
  padding: 0px; 
  text-align: center;
  top: 0px;
  position: relative;
  transition: 0.25s easeOutExpo;
}

.is_active {
  top: -19px;
  transition: 0.25s cubic-bezier(.25,.25,.75,.75);
}

JavaScript

$(document).ready(function() {

  var animate_options = function(option_name, time1, time2) {
    $(option_name).delay(time1).addClass('is_active');

    setTimeout( function(){ 
      $(option_name).removeClass("is_active").fadeOut(time1); 
    },time2 );
  };

  animate_options('#gender', 1000, 1500);
  animate_options('#occupation', 1500, 2000);

});