javascript - 当鼠标悬停在页面加载时的框上时，停止 jQuery 运行

Question

我有这个 jQuery:

jQuery('.slidey').on('hover',function(){
    if (jQuery(window).width() > 1151) {
    jQuery(this).children('.post-content').stop().slideToggle(180);
}});

但是，我遇到了一个问题，如果我加载页面，并且我的鼠标已经位于滑动框的位置，那么该框将向上滑动并且切换将反转...所以 - 切换当我悬停时我想显示的状态在我不悬停时显示，当我悬停时它隐藏，而不是相反..!

如果在页面加载时鼠标已位于鼠标上方，如何让 jQuery 忽略鼠标以阻止此切换被反转？我查看了这里的其他问题，但解决方案似乎不起作用。

希望能帮到你。

Answer 1

鉴于 .hover 的规范 here ，我建议同时使用hoverIn和hoverOut，然后使用slideDown和slideUp而不是使用slideToggle，例如:

jQuery('.slidey').hover( 
  function(){
    if (jQuery(window).width() > 1151) {
      jQuery(this).children('.post-content').stop().slideDown(180);
    }
  },
  function(){
    if (jQuery(window).width() > 1151) {
      jQuery(this).children('.post-content').stop().slideUp(180);
    }
  }
);

另外，可以在这里找到See Additional Notes :

Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.