使用 jQuery UI 实现动画效果 addClass/removeClass

Question

为了向 addClass/removeClass 添加淡入淡出过渡，我使用 jQuery UI：

$(document).ready(function(){
    $('header nav a').hover(
        function(){
            $('header').stop().removeAttr("style").addClass('header-pink', 'slow')
        },
        function(){
            $('header').stop().removeClass('header-pink', 'slow')
        }
    )
});

我的目标是：当 :hover 子元素（悬停）时更改（使用淡入淡出动画/效果）父元素（标题）的背景颜色导航a）。 css 类非常简单：

.header-pink { background: pink; }

HTML：

<header>
    <nav>
        <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
        </ul>
    </nav>
</header>

当然，我调用 jQuery 和 jQuery UI 时没有错误：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"</script>
<script src="js/libs/jquery.effects.core.min.js"></script>

jQuery 脚本无法正常工作，因为：

• 该类已添加（onmouseover），但没有过渡（淡入淡出）效果。
• 该类以不需要的方式添加：
  我使用 .removeAtrr("style") 来避免这种奇怪的行为。
• 该类不会被删除 (onmouseout)。

使用 .animate()我更愿意避免使用 jQuery UI 来设置颜色动画，因为我使用 LESS 的变量，当然，我只想修改样式 请检查我的项目以获取想法，如

您所见，我的目的是。当您将光标放在链接上时，将固定

的背景颜色替换为链接的颜色，换句话说，将

< 的背景颜色替换。 /code> 以过渡淡入淡出的方式转动一旦指针悬停在链接“Posts”或“Links”上，动画/效果就会变为蓝色或粉红色，但它会恢复其原始状态（没有 css 类，.removeClass()）一旦指针移出，就会具有相同的过渡淡入淡出动画/效果。请注意，我的项目仍在开发中，我目前正在测试所有链接具有相同属性的效果；当我实现所需的结果时，我将为每个链接应用单独的属性（背景颜色）。