动画制作取决于输入框是否为空并停留在那里

我正在尝试制作一个输入框，它看起来像是有一个占位符，上面写着用户名，但当框被选中时，它会移动并变为更深的颜色，以类似于标签。我遇到的问题是，每当我将鼠标悬停在框上时，它都会完成动画，但随后会立即撤消，将文本放回占位符的样子。我还想制作我的Javascript/JQuery代码，这样，如果框中有任何键入内容，文本将保留为标签，即使没有被选中，也不会返回占位符。我的另一个问题是，我不知道JQuery命令来判断是否选择了输入框。我在下面提供了我的所有代码，以及一个链接到CodePen，它有

<div id='inputdiv'>
  <input id='textinp'>
</div>
<h4>Username</h4>

#textinp {
  border: none;
  width: 200px;
  height: 30px;
  font-size: 20px;
  margin-left: 5px;
  font-family: 'Roboto', sans-serif;
  background: rgba(0, 0, 0, 0);
}
input:focus {
  outline: 0;
}
#inputdiv {
  width: 200px;
  height: 32px;
  margin: 0 auto;
  margin-top: 70px;
  border-top: 1px solid black;
  border-right: none;
  border-left: 1px solid black;
  border-bottom: none;
  z-index: -2;
}
h4 {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  position: relative;
  bottom: 53px;
  left: 575px;
  color: #C2C2C2;
  z-index: -1;
}

$(document).ready(function() {
  $("#inputdiv").mouseenter(function() {
    $("h4").animate({
      left: '470px',
      color: '#00000'
    });
    if ($('#textinp').val() == '') {
      $("h4").animate({
        left: '580px',
        color: '#C2C2C2'
      });
    }
  });
});

CodePen