Скрыть элемент при отпускании мыши (только при быстром движении?)

Question

Я пытаюсь заставить кнопку исчезнуть при перемещении моей мыши из коробки. Тем не менее, кнопка исчезает только при быстром движении мыши. Если я медленно вывожу мышь из окна, то кнопка все еще существует за пределами окна. Как я могу это исправить?

$('.moveBox').bind('mousemove', function(e) {
  $('.moveBut').css({
    left: e.pageX + 20,
    top: e.pageY + 20
  })
})

$('.moveBut').hide();

$('.moveBox').on('mouseenter', function() {
  $('.moveBut').show();
});

$('.moveBox').on('mouseleave', function() {
  $('.moveBut').hide(10);
});

.moveBox {
  width: 800px;
  height: 200px;
  margin: 0;
  background-color: pink;
}

.moveBut {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  margin: -50px 0 0 -50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="moveBox">
  <button class="moveBut">hello</button>
</div>

https://codepen.io/evibreukers/pen/XWbMerd