用 .hoverIntent 替换 MouseOver

Question

首先我很抱歉......我之前已经发布过这个问题，但我没有很好地解释它。我无法将 hoverIntent 插入以下 JavaScript... 我需要它来替换下面的 mouseenter 和 mouseleave 函数。为了清楚起见，我正在寻求帮助，因为我对 JavaScript 语法不是很好。下面的第二个代码 sn-p 似乎应该可以工作，但它什么也没做，而且在 Internet Explorer 中似乎完全死了。

if (jQuery.browser.msie === true) {
  jQuery('#top_mailing')
    .bind("mouseenter",function(){
      $("#top_mailing_hidden").stop().slideDown('slow');
    })
    .bind("mouseleave",function(){
      $("#top_mailing_hidden").stop().slideUp('slow');
    });
}

我将以下内容用于其他浏览器，但它在 Internet Explorer 中不起作用。

$('#top_mailing').hoverIntent(
  function () {
    $("#top_mailing_hidden").stop().slideDown('slow');
  }, 
  function () {
    $("#top_mailing_hidden").stop().slideUp('slow');
  }
);

Answer 1

我想我找到了问题。

您拨打了两次$('#top_mailing').hoverIntent(...。一次在 hoverintent_r5.js 文件的底部，一次在您的 custom.js 文件中。显然 IE 不喜欢这样。摆脱一个或另一个，它应该没问题。

最好将所有代码保存在自己的 js 文件中。否则很容易忘记。

编辑：避免 stop() 问题。

我更喜欢动画：

$('#top_mailing').hoverIntent(
  function () {
    $("#top_mailing_hidden").stop().animate({height:150},'slow');
  }, 
  function () {
    $("#top_mailing_hidden").stop().animate({height:0},'slow');
  }
);

这样，当你需要停下来改变方向时，它总能知道去哪里。 （上例中为 0 和 150。）

请注意，这需要 top_mailing_hidden 设置 clip:auto; overflow:hidden。

由于您正在使用 hoverIntent，因此可能不需要调用 stop()，因为 hoverIntent 旨在避免那些意外的鼠标悬停事件。

题外话：

在实施时请记住一件事。由于这是要填写的表格，因此用户可能会（甚至不假思索地）在开始输入时将鼠标移开。这将导致表单消失。

考虑到这一点，您可能需要重新考虑执行 mouseout 事件。当用户提交表单时，您始终可以使用可选的“取消”或“关闭”按钮将其向后滑动。