0

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

我正在开发一个菜单，该菜单使用 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 );
   }
  );

 }
);
4

3 回答 3

1

继续猜测 ie7 不支持不透明度。需要使用

 filter: alpha(opacity='90')
于 2009-11-16T20:48:11.140 回答
0

我想出了一个工作解决方案，它最终比我的原始代码更好，因为这样我可以使用出色的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

于 2009-11-19T16:43:21.823 回答
0

好的，在阅读了有关animate, fadeIn/的更多信息后fadeOut，fadeTo我了解到我不需要为 IE 使用 filter: alpha，因为 Jquery 已经支持它。

知道了这一点，我使用fadeInand fadeOut（现在在线）进行了测试，它可以工作，但是有一个问题，如果您将鼠标悬停进出几次，它会继续重复动画。这不会发生fadeTo或animate因为我可以添加stop()之前，但它不适用于 IE7。

这是我目前的代码，下面是在 IE7 中不起作用的带有 fadeTo 的示例。

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

 }
);

希望有人可以提供帮助。

于 2009-11-19T00:05:43.183 回答