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 the child元素（悬停nav 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）但没有转换（淡入淡出）效果。
以不受欢迎的方式添加课程：<header style="background: pink;">我使用.removeAtrr("style")来避免这种奇怪的行为。
不删除课程（onmouseout）。

使用.animate()使用jQuery UI为颜色设置动画是我更愿意避免的，因为我使用LESS的变量，当然，我希望样式只能由样式表修改。< / p>

请check my project to get an idea。如您所见，我的目的是在将光标放在链接上时用固定<header>的背景颜色替换链接的颜色。换句话说，只要指针位于<header>的背景颜色，就会将过渡淡入淡出动画/效果变为蓝色或粉红色：将链接悬停在“帖子”上。或“链接”。但是一旦指针退出并具有相同的过渡淡入淡出动画/效果，它就会恢复其原始状态（没有css类，.removeClass()）。请注意我的项目仍在开发中，我目前正在测试所有链接的相同属性的效果;当我完成所需的结果时，我会为每个链接应用各个属性（背景颜色）。

使用jQuery UI动画效果addClass / removeClass

0 个答案: