Выпадающее меню - проблемы с JQuery на IE7

Question

EDIT: Код и примеры были изменены, см. Прогресс ниже.

Я работаю над меню, которое использует JQuery для анимации отображения списков выпадающего списка.

Идея состоит в том, чтобы иметь меню, которое хорошо работает без javascript, но когда оно включено, мы можем иметь немного таланта с JQuery, добавляя альтернативную таблицу стилей и некоторую анимацию.

Проблема заключается в IE7 и моей неспособности решить проблему. Я поставил example online, где вы можете увидеть эту проблему. В IE7 всплывающее окно (навигация второго уровня) не отображается, когда включен javascript.

У меня есть тест в IE8 (режим совместимости) и автономный IE7 У меня не было возможности протестировать в чистом IE7, поэтому, если кто-то из вас, возможно, попробует, и дайте мне знать, что произойдет ?

Кто-нибудь знает, в чем проблема?

Ссылка на файлы: uxte.com/test/menu/

Ссылка на пример: uxte.com/test/menu/dropdown_example.html

Jquery код ниже:

$(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

собираюсь идти вперед и предположить, что ie7 не поддерживает непрозрачность. нужно использовать

filter: alpha(opacity='90') 

Answer 2

Ok, после прочтения немного больше о animate, fadeIn/fadeOut и fadeTo я понял, что не нужно использовать фильтр: альфа для IE, как Jquery уже поддерживает его.

Зная, что я сделал тест с использованием fadeIn и fadeOut (now online), и она работает, но есть проблема, если вы наведете в и несколько раз он продолжает повторять анимацию. Это не происходит с fadeTo или animate, так как я могу добавить stop(), но он не работает на IE7.

Это мой настоящий код и ниже пример с fadeTo, который не работает в 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'); 
    } 
); 

} 
); 

Не работает код (на 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); 
    } 
); 

} 
); 

Надежда кто-то может помочь.

Answer 3

Я придумал рабочее решение, которое в конце концов лучше моего исходного кода, так как я могу обрабатывать тайминги анимации, используя отличный плагин hoverIntent.

$(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")); 
      } 
     }); 

    } 
); 

Вы можете увидеть рабочий пример на: uxte.com/test/menu/dropdown_example.html