问如何更好地控制这个jQuery UI脚本，它在mouseover/mouseout事件上向div添加一个覆盖？

EN

我正在为一个网站建立一个主页，它包含在<div>元素中的许多促销链接。

为了更有趣，我设计了一个覆盖<img>，当用户将光标悬停在相应的宣传片上时，它会出现在<div>上，然后当光标被移除时消失。我使用jQuery UI .toggle()效果对其进行上下动画化，如下所示：

$("#hp-promo-1").on("mouseover", function() {
  $("#promo-1-overlay").toggle("slide", {direction: "right"})
})

$("#hp-promo-1").on("mouseout", function() {
  $("#promo-1-overlay").toggle("slide", {direction: "right"})
})

虽然这是有效的，因为它动画覆盖和关闭，我有问题，行使任何形式的控制它。有时覆盖会反复滑动，甚至在mouseout事件之后也是如此。

我可以向这段代码介绍什么，以确保覆盖层只在一次上滑动，然后保持在mouseover上的位置，然后滑动一次，然后隐藏在mouseout?上。