用.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; overflow:hidden。

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

稍稍偏离主题：

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

考虑到这一点，您可能想重新考虑做一个mouseout事件。当用户提交表单时，您可以随时使用可选的“取消”或“关闭”按钮使其回滚。