ナビゲーションバーに基づいて、私は/でシンプルなフェードを作成しようとしています

Question

挨拶、

はjQueryのを使用して、ナビゲーションバーの各ボタンのテキストとDIVをフェードアウトし、私はいくつかに実行していますよ問題。ここで私が何をしようとしています何のスクリーンショットです：ユーザーがナビゲーションバー上の項目の上に置いたときに

基本的には、divがそのボタンに関連したテキストとナビゲーションの下に表示されます。私がこれまでに思い付いたマークアップは恐ろしいものですが、これについて正しい正しい方法ではないことを知っています。また、配列を使用して、ナビのボタンのtitle属性のテキストをinfo divで埋めようとしました。タイトルも表示されます。

あまりにも複雑であることは別として、ある点までは機能します。ユーザーがナビゲーションバーを高速に出入りすると、すべてのものが点滅します（非表示と：表示なし）。または：非表示と：表示が使用されている場合は表示されません。ここで

は、現在のマークアップです：インフォDIV

#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

<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を

のためのHTMLのための

CSS

$("#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をフェードインし、ユーザーが別のボタンに移動したときにテキストを変更し、ナビゲーションバーから移動するときにテキストを非表示にしたいとします。

ありがとうございます！ mVChrの提案に

SOLUTION（jmansのおかげで）

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

UPDATE おかげで、コードは数行に縮小されています。 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'); 
      }); 

Answer 1

あなたがホバー状態の変更進行中のアニメーションを停止するにはstop（）メソッドを使用して試みることができる：

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

として、他のアニメーションコールと同じように。

Answer 2

あなたは、それが特定のブラウザで起きている話をしているちらつき？私はChromeとFirefoxでテストしました。

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

代わりに、ステータステキストをHTML内のリンクのtitle属性に移動し、jQueryがその属性を読み取ってテキストを取得させました。また、これは6行にあなたのjQueryコードの最初の15行を削減：

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