Javascript jQuery语法、mouseover&；超时

我第一次使用JQuery，并尝试为一个元素实现脚本，该元素将“on mouse enter”扩展到50px。鼠标悬停1秒或更长时间后，应再扩展到190px。最后，当鼠标离开该位置时，应将其大小调整回35px。如果鼠标在完全扩展到190px之前离开该位置，则不应继续该步骤

到目前为止，我开发的代码允许元素扩展，但是如果移除鼠标，无论悬停的时间如何，元素的大小都将达到190px

我意识到我很可能需要在这里使用超时函数或某种if语句，但是在将其添加到原始代码时遇到问题

   $(document).ready(function() {
    $("#element").on("mouseenter", function() {
     $(this).animate({"width": "50px"})
//DELAY 100MS, IF THE MOUSE IS STILL HOVERED THEN PROCEED
    .animate({"width": "190px"});
//ELSE CONTINUE WITH MOUSE LEAVE FUNCTION
     }).on("mouseleave", function() {
      $(this).animate({"width": "35px"});
  });
 });

正如我提到的，我很难找到正确的语法，在阅读了其他问题后，我变得更加困惑；哪一个最好用？超时、、悬停、if语句等

---

在jQuery中，您有一个延迟函数。最好是查看文档

尝试在第二个动画之前使用

setTimeout

函数超时1秒：

$（“#元素”）。在（“鼠标指针”，函数（）{
$（this.animate（{width:50}）；
$（this）.data（'hover-timeout'，setTimeout（function（））{
$（this.animate（{width:190}）；
}.bind（这个），1000）；
})
.on（“mouseleave”，函数（）{
clearTimeout（$（this.data（'hover-timeout'））；
$（this.stop（true）.animate（{width:35}）；
});
#元素{
背景色：#AAA；
宽度：35px；
高度：50px；
}
对原始代码进行了可爱的添加，谢谢。我还添加了更多属性，允许鼠标滚动时更改图像源；下面是代码：
$（“#element1”）.on（“mouseenter”，function（）{$（this）.animate（{width:50}）.children（'img'）.attr（'src'，images/cl.png'）；$（this）.data（'hover-timeout'，setTimeout（function（）{$（this）.animate（{width:190}）；}.bind（this），500）））））.on（“mouseleave”，function（）{cleartimout（$（this）.data（'hover-timeout'）；$（this）.stop（true）.animate（{width:35}）.children（'img'）.attr（'src'，'images/bw.png'）；}）；