0

jQuery Color プラグインを使用しfadeIn()て、背景色を白にしfadeOut()てから透明にするメニューを作成しています。

ホバー機能がアニメーションが適用された要素を離れているため、フェードアウトしていることはわかっていますが、サブナビゲーションリストを下に移動するときにメインメニュー項目で背景色をアクティブに保つ方法はありますか?

ホバーオーバーが css にあるときに最初にこれが機能しましたが、jQuery アニメーションを追加すると壊れてしまいました。

この問題でさらに実装する必要があるのは、私の jQuery または CSS であるかどうかを誰かが提案できますか?

私の質問をサポートするコードは次のとおりです。

ナビの典型的なレイアウト

 <ul id="nav-1">
     <li class="<span>Main Nav Link</span>
        <ul class="sub-menu">
           <li>Sub-Nav-1</li>            
           <li>Sub-Nav-2</li>
           <li>Sub-Nav-3</li>
        </ul>
      </li>
     <li>Another Link</liv>
  </ul>

CSS: ul#nav-1 li { position:relative; 表示:インラインブロック; マージン:0; }

ul#nav-1 li span, ul#nav-1 li a {
padding:18px 13px;
font-size:14px;
color:#2e2e2e;
display:block;
}

ul#nav-1 ul.sub-menu {
position:absolute;
top:58px;
list-style: none;   
z-index:1;
text-align:left;
}

ul#nav-1 ul.sub-menu li {
display:block;
margin: 0;
}

ul#nav-1 ul.sub-menu li a { 
border-bottom:1px solid #dbddd4;
background-color:#f2f2f2;
width:220px;
display: block;
padding: 13px 0px 13px 18px;
}

背景の Jquery アニメーション:

('ul#nav-1 li span, ul#nav-1 li').hover(function(){
        $(this).animate({backgroundColor: '#FFF'}, 'slow');
}, function(){
        $(this).animate({backgroundColor:"transparent"}, 'slow');
});
4

2 に答える 2

0

または、CSS3 を使用してこれを簡単に解決することもできます。

SASS を使用している場合:

ul#nav-1 li:hover{
   @include transition-property(background);
   @include transition-duration(500);
   background-color: #FFF
}

jQueryは必要ありません。これで問題が解決します。

参考：CSS3トランジション

于 2013-08-02T10:10:39.410 に答える