jQuery: hoverIntent and graphical effects -> drastic browser performance

Question

I am working on a webpage that has a main menu, and a submenu that will hold different content for every button in the main menu.

To keep the submenu open while hovering over it, I am using a combination of hoverIntent, hover, and a state variable: $.hovering:

$(function() {
  $.hovering = false;

  $("div.button").hoverIntent(
    function() {
      $(this).css('backgroundImage','url(images/subnav.png)'); 
      $(this).children("a").css('color', '#ffffff');
      $("div#subnav").slideDown();
    },
    function() {
      if(!$.hovering) {
        $("div#subnav").slideUp();
        $(this).css('backgroundImage','none'); 
        $(this).children("a").css('color', '#676767');
      }
    }
  );

  $("div#subnav").hover(
    function() {
      $.hovering = true;
    },
    function() {
      $.hovering = false;
      $("div#subnav").slideUp();
      $("div.button").css('backgroundImage','none'); 
      $("div.button a").css('color', '#676767');
    }
  );

});

(please dont pay attention to the .css calls, I'm planning to put those styles into classes)

I'm developing under Ubuntu, and testing IE browsers through a virtual machine using IETester.

My problem is that it works perfectly in FF3, IE6 and IE8.. but IE7 shows extreme jerkyness when a slideDown event is supposed to occur. The funny thing is that a friend of mine who checked the page is experiencing exactly the same thing... in Firefox! (and also IE7, for that matter).

Surely this little snippet can't be such a huge strain on system resources? And why is IE6 even outperforming IE7 (at least for me) here?

A test-case can be found here.

I've tried wrapping subnav into a visible empty wrapper div with the same height, but getting the same results in IE7. Testcase: here.

Edit: Testcases are temporarily offline due to the fact that my ISP decided to quit on me. I can confirm that it is not just an issue with slideDown, but also when using other graphical effects such as fadeIn/fadeOut.. I'm beginning to suspect hoverIntent.

Answer 1

I wonder if it has to do with the sliding down on the whole page below it. That could be quite taxing on the browser and also a generally bad idea from a usability perspective.

Answer 2

IE7 is old, just make its users feel how much it is old.