jQuery bgColor 动画：向下子菜单时保持活动状态答案

【问题标题】：jQuery bgColor animation: keep active when going down a sub-menujQuery bgColor 动画：向下子菜单时保持活动状态
【发布时间】：2013-08-02 09:03:38
【问题描述】：

我正在使用jQuery Color plugin 将菜单fadeIn() 设置为白色背景，然后将fadeOut() 设置为透明。

我知道它正在淡出，因为悬停功能正在离开应用了动画的元素，但是当您进入子导航列表时，有没有办法在主菜单项上保持背景颜色处于活动状态？

当我的鼠标悬停在 css 中时，我第一次使用它，但添加 jQuery 动画后它现在坏了。

谁能建议我的 jQuery 或 CSS 是否需要更多地实现这个问题？

这里有一些代码来支持我的问题：

Nav 的典型布局

 <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 李{ 位置：相对；显示：内联块；边距：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');
});

【问题讨论】：

你应该为这类问题提供一个jsfiddle

标签： jquery

【解决方案1】：

我认为您只需要更改您的选择器，以便 mouseleave 事件只会在您离开父 li 时触发：

$('#nav-1 > li').hover(function(){
    $(this).stop().animate({backgroundColor: '#FFF'}, 'slow');
}, function(){
    $(this).stop().animate({backgroundColor: 'transparent'}, 'slow');
});

Here's a fiddle

如果您只希望动画在父级（li 或 span）上发生，则必须做一些更精细的事情：

var $el, $this;
$('#nav-1 > li').hover(function() {
    $this = $(this);
    $el = ($this.has('ul.sub-menu').length) ? $this.find('ul.sub-menu').prev() : $this; 
    $el.stop().animate({ backgroundColor: '#FFF' });
}, function() {
    $el.stop().animate({ backgroundColor: 'transparent' });                           
});

所以检查悬停的元素是否包含.sub-menu，如果包含，则将动画应用于紧接在.sub-menu之前的元素，如果没有，则将其应用于li。

Here's another fiddle

【讨论】：

【解决方案2】：

您也可以使用 CSS3 轻松解决此问题。

如果您使用的是 SASS：

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

不需要 jQuery，这将解决您的问题。

参考：CSS3 Transitions

【讨论】：