1

为了向 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 子元素（hover 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中使用变量，当然，我希望样式只由样式表修改。

请检查我的项目以获得一个想法。如您所见，我的目的是在<header>将光标放在链接上时将固定的背景颜色替换为链接的颜色。换句话说，<header>当指针指向时，带有过渡淡入淡出动画/效果的转弯的背景颜色为蓝色或粉红色：悬停链接“帖子”。或“链接”。.removeClass()但是一旦指针以相同的过渡淡入淡出动画/效果消失，它就会恢复其原始状态（没有 css 类）。请注意，我的项目仍在开发中，我目前正在测试所有链接的相同属性的效果；当我完成所需的结果时，我将为每个链接应用单独的属性（背景颜色）。

4

0 回答 0