4

ご挨拶、

jQueryを使用してナビゲーションバーの各ボタンのテキストを使用して単純なフェードイン/フェードアウトDIVを作成しようとしていますが、いくつかの問題が発生しています。これが私がやろうとしていることのスクリーンショットです：

スクリーンショット

基本的に、ユーザーがナビゲーションバーの項目にカーソルを合わせると、ナビゲーションの下にそのボタンに関連するテキストを含むdivが表示されます。私がこれまでに思いついたマークアップは恐ろしいものであり、これを行う正しい方法ではないことを私は知っています。また、配列を使用して、ナビゲーションボタンのタイトル属性からのテキストで情報divを埋めようとしました-後者はうまくいきましたが次に、タイトルも表示されます。

複雑すぎることは別として、それはある程度機能します。ユーザーがナビゲーションバーにすばやく出入りすると、全体が点滅し（：hiddenと：visibleを使用せずに）、：hiddenと：visibleが使用されている場合は表示されません。

現在のマークアップは次のとおりです。

情報DIVのCSS

#header-info-text {
    width: 480px;
    text-align: right;
    float: right;
    margin-right: 20px;
    padding-right:  25px;
    background: url('/images/info-arrow.png') top right no-repeat transparent scroll;
    color: #fff;
    display: none;
}

navのHTML

<div id="navBar">
      <ul>
          <li class="nav-first nav-active"><a href="#">Home</a></li>
          <li id="navAbout"><a href="#">About</a></li>
          <li id="navPort"><a href="#">Portfolio</a></li>
          <li id="navServ"><a href="#">Services</a></li>
          <li id="navBlog"><a href="#">Blog</a></li>
          <li id="navContact" class="nav-last"><a href="#">Contact</a></li>
      </ul>
</div>
<div id="header-infoDIV">
      <span id="header-info-text"></span>
 </div>

Javascript

$("#navBar ul li").hover(function() {
     var text;
     var id = $(this).attr('id');
     if (id == 'navAbout') {
     text = 'Learn more ..';
     } else if (id == 'navPort') {
      text = 'View our recent work and ongoing projects';
      } else if (id == 'navServ') {
      text = 'Learn about our services';
      } else if (id == 'navBlog') {
      text = 'View the our Blog';
      } else if (id == 'navContact') {
      text = 'We\'re looking forward to working with you!';
      } else {
      text = '';
       }
      $("#header-info-text").text(text);
      $("#header-info-text:hidden").fadeIn('slow');
      });
            $("#navBar ul").hover(function() {
                $("#header-info-text:hidden").fadeIn('slow');
            }, function() {
                $("#header-info-text:visible").delay(500).fadeOut('slow');
            });

この種のことに取り組むための最良の方法は何ですか？基本的に、情報テキストのDIVをフェードインし、ユーザーが別のボタンに移動したときにテキストを変更し、ナビゲーションバーから移動したときに非表示にします。

ありがとう！

ソリューション（jmansに感謝）

 $("#navBar ul").hover(function() {
        $("#header-info-text").stop(true,true).fadeIn('slow');
    }, function() {
        $("#header-info-text").stop(true,true).delay(500).fadeOut('slow');
    });

更新 mVChrの提案のおかげで、コードは数行に短縮されました。jmansによって提供された提案と組み合わせて、それは私が望んでいたことを実行しています：

$("#navBar ul li a").hover(function() {
                var text = $(this).attr('rel');
                $("#header-info-text").text(text);
                $("#header-info-text").stop(true,true).fadeIn('slow');
            },
            function() { 
               $("#header-info-text").stop(true,true).delay(500).fadeOut('slow');
            });
4

2 に答える 2

2

stop（）メソッドを使用して、ホバー状態が変化したときに進行中のアニメーションを停止することができます。

        $("#navBar ul").hover(function() {
            $("#header-info-text:hidden").stop(true,true).fadeIn('slow');
        }, function() {
            $("#header-info-text:visible").stop(true,true).fadeOut('slow');
        });

他のアニメーションの呼び出しと同様に。

于 2011-01-20T04:10:40.167 に答える
1

あなたが話しているちらつきがわかりません、それは特定のブラウザで起こっていますか？ChromeとFirefoxでテストしました。

ただし、コンテンツを機能から分離することでコードを改善する方法を示すために、このフィドルを作成しました。基本的に、ステータステキストを更新する場合、適切な場所はコードではなくHTMLです。また、これらの特定の条件をすべてコードに含めることは、あまり維持できません。いくつかのメニュー項目を追加または変更したいかどうかを考えてください。

代わりに、ステータステキストをtitleHTML内のリンクの属性に移動し、jQueryにその属性を読み取らせてテキストを取得しました。これにより、jQueryコードの最初の15行が6行に減ります。

$("#navBar ul li a").hover(function() {
    var text = $(this).attr('title');
    var id = $(this).attr('id');
    $("#header-info-text").text(text);
    $("#header-info-text:hidden").fadeIn('slow');
});
于 2011-01-20T04:09:00.943 に答える