Javascript 确保JQuery悬停效果在鼠标退出时恢复（即使初始悬停效果未完成）

我希望能够在鼠标悬停时缩小子div，当鼠标退出时，子div将放大。我有它的工作，但我遇到了一个问题，当我进入和退出子div之前，最初的规模缩小效果完成。如果我太快地进入和退出子div，则子div不会向上缩放。我知道我可以用CSS来实现这一点，但在这个特殊的例子中，我需要JQuery来工作

我设置了一个简单的JSFIDLE来显示我正在经历的事情。如果您在小提琴中快速进入和退出蓝色框，就像在框缩小之前退出一样，您可以看到蓝色框不会重新出现

HTML

JQuery

---

我注意到的一件事是，通过更改jQuery1.10+的版本，它的工作状态良好。如果你在没有UI的情况下使用JQuery，那么缩放效果就不能正常工作。它向下扩展到框的左上角。如果在启用UI的情况下使用1.9，则可以看到框会缩小，原点位于中心。jQueryUI是jQueryEffects正常工作所必需的。

<div id = "block-example">   
   <div id = "inner-block">   
   </div>
</div>

#block-example{
   width:100px;
   height:100px;
   padding:10px;
   background:red;
}

#inner-block{
   width:100px;
   height:100px;
   background:blue;
}

$('#block-example').hover(function () {
  $(this).children().hide({effect: 'scale', duration: 100});
},function(){
  $(this).children().show({effect: 'scale', duration: 100});
});