Выпадающее меню - Jquery проблемы в IE7 - PullRequest
Новая
       36

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

0 голосов
/ 16 ноября 2009

РЕДАКТИРОВАТЬ: Код и примеры были изменены, см. Прогресс ниже.

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

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

Проблема в IE7 и моей неспособности решить ошибку. Я поместил пример онлайн , где вы можете увидеть проблему. В 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 );
   }
  );

 }
);

Ответы [ 3 ]

1 голос
/ 16 ноября 2009

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

 filter: alpha(opacity='90')
0 голосов
/ 19 ноября 2009

Я придумал рабочее решение, которое в конце концов лучше, чем мой оригинальный код, так как таким образом я могу обрабатывать время анимации, используя отличный плагин 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

0 голосов
/ 19 ноября 2009

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

Зная это, я сделал тест, используя fadeIn и fadeOut ( сейчас в сети ), и он работает, но есть проблема, если вы несколько раз наводите курсор мыши, он повторяет анимация. Этого не происходит с 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 );
   }
  );

 }
);

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

...