javascript - 用 .hoverIntent 替换 MouseOver

Question

首先我深表歉意......我之前已经发布过这个问题，但我没有很好地解释它。我无法插入 hoverIntent到下面的 JavaScript 中...我需要它来替换下面的 mouseenter 和 mouseleave 函数。需要说明的是，我寻求帮助是因为我不太擅长 JavaScript 语法。下面的第二个代码片段似乎应该可以工作，但它什么也没做，而且在 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;溢出:隐藏设置。

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

稍微跑题了:

实现时请牢记一件事。由于这是一个要填写的表单，用户可能会(甚至不假思索地)在开始输入时将鼠标移开。这将导致表单消失。

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