Replacing MouseOver with .hoverIntent

Question

First off I apologize... I have posted this question before but I did a bad job of explaining it. I'm having trouble plugging hoverIntent into the following JavaScript... I need it to replace the "mouseenter" and "mouseleave" functions below. Just to be clear, I'm asking for help because I'm not very good with javaScript syntax. The second code snippet below seems like it should work, but it does nothing and seems completely dead in 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');
    });
}

I'm using the following for other browsers but it's not functioning in Internet Explorer

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

Answer 1

I think I found the problem.

You're calling $('#top_mailing').hoverIntent(... twice. Once at the bottom of the hoverintent_r5.js file, and once in your custom.js file. Apparently IE doesn't like that. Get rid of one or the other, and it should be fine.

Probably better to keep all your code in your own js file. Otherwise it's easy to forget about.

EDIT: Avoiding the stop() issue.

I prefer animate:

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

This way, when you need to stop and change directions, it will always know where to go. (0 and 150 in the example above.)

Please note that this would require top_mailing_hidden to have clip:auto; overflow:hidden set.

Since you're using hoverIntent, there may be no need for the calls to stop(), since hoverIntent is meant to avoid those unintended mouseover events.

Slightly off topic:

Keep one thing in mind with your implementation. Since this is a form to fill out, users will likely (without even thinking) move their mouse out of the way when they start typing. That will cause the form to disappear.

With that in mind, you may want to reconsider doing a mouseout event. You could always make it slide back up when the user submits the form, with an optional 'Cancel' or 'Close' button.