jQuery 语法，鼠标悬停和超时

Question

我第一次使用JQuery，并试图实现一个元素的脚本，该元素将"在鼠标输入时"扩展到50px。鼠标悬停1秒或更长时间后，它应该会进一步扩展到190像素。最后，当鼠标离开该位置时，它应该将大小调整回35px。如果鼠标在完全扩展到190像素之前离开该位置，则不应继续执行该步骤。

到目前为止，我开发的代码允许元素展开，但如果移除鼠标，无论悬停时间如何，元素的大小都将达到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语句等。？

http://jsfiddle.net/#&togetherjs=3gl8z3blFI

Answer 1

尝试在第二个动画之前使用setTimeout函数1秒超时：

$("#element").on("mouseenter", function () {
    $(this).animate({width: 50});        
    $(this).data('hover-timeout', setTimeout(function() {
        $(this).animate({width: 190});
    }.bind(this), 1000));
})
.on("mouseleave", function () {
    clearTimeout($(this).data('hover-timeout'));
    $(this).stop(true).animate({width: 35});
});

#element {
    background-color: #AAA;
    width: 35px;
    height: 50px;
}

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

Answer 2

在jQuery中，您有一个延迟函数。最好是看一下医生http://api.jquery.com/delay/