Jquery ui 使用jQuery UI动画效果addClass/removeClass

为了向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')
        }
    )
});

我的目标是：在：悬停子元素（悬停导航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>

通过检查源代码，我意识到添加了“样式”atributte（我不喜欢），并且出现了一种奇怪的行为：添加了大量动态rgb值以创建淡入效果。看起来很脏！此外，“样式”属性在转换后仍为空。