Dropdown menu - Jquery problems on IE7

Question

EDIT: The code and examples have been changed, see the progress below.

I'm working on a menu that uses Jquery to animate the display of the dropdown/flyout lists.

The idea is, to have a menu that works well without javascript but when it is enabled we can had a bit of flair with Jquery, adding a alternative stylesheet and some animation.

The problem is IE7 and my inability to solve the bug. I've put an example online where you can see the issue. In IE7 the flyout (second-level navigation) does not display when javascript is enabled.

I have test it in IE8 (compatibility mode) and IE7 standalone I haven't had the opportunity to test in a pure IE7, so if any of you guys have it could you have a try and let me know what happens?

Does anybody know what can be the problem?

Link to the files: uxte.com/test/menu/

Link to example: uxte.com/test/menu/dropdown_example.html

Jquery code below:

    $( document ).ready (
 function() {

  $('head link#noscript').replaceWith('<link id="script" rel="stylesheet" href="script.css" type="text/css" />');

  /*Menu effects*/

  function showElement( element ) {

   element.css({ 
    'display' : 'block',
    'opacity' : '0'
   });

   // animate opacity to full
   element.stop().animate({opacity: 1},{
    duration: 500
   });

  }

  function hideElement( element ) {

   // animate opacity to nil
   element.stop().animate({opacity: 0},{
    duration: 500,
    complete: function (){ 
     element.css({ 'display' : 'none' });
    }
   });

  }


  $( "div#menu ul li" ).hover (

   function() {

    var ul = $( this ).find( "ul:first" );
    showElement( ul );

   }, 

   function() {

    var ul = $( this ).find( "ul:first" );
    hideElement( ul );
   }
  );

 }
);

Answer 1

gonna go ahead and guess that ie7 does not support opacity. need to use

 filter: alpha(opacity='90')

Answer 2

Ok, after reading a little more about the animate, fadeIn/fadeOut and fadeTo I understood that I don't need to use filter: alpha for IE as Jquery already supports it.

Knowing that, I made a test using fadeIn and fadeOut (now online) and it works, but there is a problem, if you hover in and out several times it continues repeating the animation. This doesn't happen with fadeTo or animate since I can add a stop() before but it doesn't work on IE7.

This is my present code and below the example with fadeTo that isn't working in IE7.

$( document ).ready (
 function() {

  $('head link#noscript').replaceWith('<link id="script" rel="stylesheet" href="script.css" type="text/css" />');


  $( "div#menu ul li" ).hover (

   function() {

    var ul = $( this ).find( "ul:first" );
    ul.fadeIn('normal');

   }, 

   function() {

    var ul = $( this ).find( "ul:first" );
    ul.fadeOut('normal');
   }
  );

 }
);

Not working code (on IE7):

$( document ).ready (
 function() {

  $('head link#noscript').replaceWith('<link id="script" rel="stylesheet" href="script.css" type="text/css" />');

  /*Menu effects*/

  function showElement( element ) {

   element.css({ 
    'display' : 'block',
    'opacity' : '0'
   });

   // animate opacity to full
   element.stop().fadeTo(500, 1);


  }

  function hideElement( element ) {

   // animate opacity to nil
   function onComplete(){ 
    element.css({ 'display' : 'none' });
   }
   element.stop().fadeTo(500, 0, onComplete);


  }


  $( "div#menu ul li" ).hover (

   function() {

    var ul = $( this ).find( "ul:first" );
    showElement( ul );

   }, 

   function() {

    var ul = $( this ).find( "ul:first" );
    hideElement( ul );
   }
  );

 }
);

Hope someone can help.

Answer 3

I came up with a working solution which in the end is better than my original code since this way I can handle the animation timings using the great hoverIntent plugin.

$( document ).ready (
    function() {

     function overHandler(element) {

       element.fadeIn('normal');

     }

     function outHandler(element) {

       element.fadeOut('normal');

     }


     $( "div#menu ul li" ).hoverIntent({    
      sensitivity: 3,
      interval: 200,
      over: function(){
       overHandler( $( this ).find( "ul:first" ) );
      },
      timeout: 500,
      out: function(){
       outHandler( $( this ).find( "ul:first" ) );
      }
     });

    }
);

You can see the working example at: uxte.com/test/menu/dropdown_example.html