javascript - Replacing MouseOver with .hoverIntent - Stack Overflow

admin管理员组

文章数量:1026380

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 pletely 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');
  }
);

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 pletely 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');
  }
);

• javascript
• jquery
• debugging
• internet-explorer-7
• hoverintent

Share Improve this question Follow edited Dec 16, 2014 at 19:44 Levi Lindsey 1,06822 gold badges1010 silver badges1717 bronze badges asked Feb 10, 2010 at 20:26 BrianBrian 3,9591212 gold badges5858 silver badges104104 bronze badges 9

• 2 Are you getting any JS errors in IE? – Mike Crittenden Commented Feb 10, 2010 at 20:57
• 1 Just tested hoverIntent & jQuery 1.4.1 with IE. Works fine. Does it animate at all for you? Is it working in other browsers? – user113716 Commented Feb 10, 2010 at 22:08
• Did you test this code: $('#top_mailing').hoverIntent( function () { $("#top_mailing_hidden").stop().slideDown('slow'); }, function () { $("#top_mailing_hidden").stop().slideUp('slow'); } ); – Brian Commented Feb 10, 2010 at 22:17
• Copied and pasted. Works fine. Does it animate at all for you? Is it working in other browsers? Have you tried it with hover()? Could you please include the CSS for top_mailing and top_mailing_hidden? – user113716 Commented Feb 10, 2010 at 22:25
• Works fine in all other browsers. It's just dead when I strip out the conditional animation for IE and leave just the above code. No animation at all. – Brian Commented Feb 10, 2010 at 22:36

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 3

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.

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 pletely 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');
  }
);

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 pletely 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');
  }
);

• javascript
• jquery
• debugging
• internet-explorer-7
• hoverintent

Share Improve this question Follow edited Dec 16, 2014 at 19:44 Levi Lindsey 1,06822 gold badges1010 silver badges1717 bronze badges asked Feb 10, 2010 at 20:26 BrianBrian 3,9591212 gold badges5858 silver badges104104 bronze badges 9

• 2 Are you getting any JS errors in IE? – Mike Crittenden Commented Feb 10, 2010 at 20:57
• 1 Just tested hoverIntent & jQuery 1.4.1 with IE. Works fine. Does it animate at all for you? Is it working in other browsers? – user113716 Commented Feb 10, 2010 at 22:08
• Did you test this code: $('#top_mailing').hoverIntent( function () { $("#top_mailing_hidden").stop().slideDown('slow'); }, function () { $("#top_mailing_hidden").stop().slideUp('slow'); } ); – Brian Commented Feb 10, 2010 at 22:17
• Copied and pasted. Works fine. Does it animate at all for you? Is it working in other browsers? Have you tried it with hover()? Could you please include the CSS for top_mailing and top_mailing_hidden? – user113716 Commented Feb 10, 2010 at 22:25
• Works fine in all other browsers. It's just dead when I strip out the conditional animation for IE and leave just the above code. No animation at all. – Brian Commented Feb 10, 2010 at 22:36

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 3

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.

本文标签： javascriptReplacing MouseOver with hoverIntentStack Overflow