0

編集：コードと例が変更されました。以下の進捗状況を参照してください。

ドロップダウン/フライアウトリストの表示をアニメーション化するためにJqueryを使用するメニューに取り組んでいます。

アイデアは、javascriptがなくてもうまく機能するメニューを用意することですが、それを有効にすると、Jqueryを少し工夫して、代替のスタイルシートとアニメーションを追加することができます。

問題はIE7とバグを解決できないことです。問題を確認できる例をオンラインで公開しました。IE7では、JavaScriptが有効になっている場合、フライアウト（第2レベルのナビゲーション）は表示されません。

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/についてもう少し読んだ後、Jquery が既にサポートしているため、IE に filter: alpha を使用する必要がないことを理解しましたfadeOut。fadeTo

それを知って、fadeInand fadeOut（現在オンライン）を使用してテストを行いましたが、動作しますが、問題があり、ホバーインとアウトを数回繰り返すとアニメーションが繰り返されます。これは、前に追加できるため、fadeToまたは前に追加できるため発生しませんが、IE7では機能しません。animatestop()

これは私の現在のコードであり、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 に答える