Question

编辑：代码和示例已更改，请参阅下面的进展。

我正在使用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

好的，在阅读了关于animate，fadeIn / fadeOut和fadeTo的更多内容后，我明白我不需要使用filter：alpha for 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

下拉菜单 - IE7上的Jquery问题

3 个答案: