在表单控件外单击时隐藏动画在聚焦时输入和回调

Question

我想在关注输入时播放动画，并在输入外部单击时删除或隐藏它，并且能够在聚焦时再次调用它。

＆＃13;

＆＃13;

$(".form-control").click(function animate() {
  $(".gotta")
    .fadeIn("slow")
    .animate({
      left: "+=900"
    }, 1000)
    .queue(function(e) {
      $(this).delay(4000);
      $(this).fadeOut(1000, function() {
        $(this).addClass("newcolor")
      }).dequeue();
    })
    .animate({
      left: '-=900'
    }, 1000)
    .queue(function() {
      $(this).fadeIn(1000)
      $(this).removeClass("newcolor").dequeue();
    }).fadeIn(200, animate);
  e.preventDefault();
});

$(".form-control").mouseout(function() {
  $(".gotta").hide();

});

＆＃13;

.gotta {
  margin: 3px;
  width: 300px;
  height: 30px;
  position: absolute;
  left: 60px;
  top: 30px;
  text-align: center;
  font-family: 'Playball', cursive;
  cursor: pointer;
  background-image: linear-gradient(-225deg, #5D9FFF 0%, #B8DCFF 48%, #6BBBFF 100%);
  display: none;
  background-position: center;
  background-size: auto;
}

.newcolor {
  background-image: linear-gradient(to top, #c4c5c7 0%, #dcdddf 52%, #ebebeb 100%);
  background-position: center;
  background-size: auto;
  margin: 3px;
  width: 300px;
  height: 30px;
  position: absolute;
  left: 60px;
  top: 30px;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
<div class="gotta">
  <h4>Here is the secret</h4>
</div>
<div class="newcolor">
  <h4>catch me if you can</h4>
</div>
</form>

＆＃13;

＆＃13;

＆＃13;