javascript - 列表项上的悬停背景颜色逐渐变化

Question

好的，代码应该做的是改变 li 标签的背景颜色。但是，它必须以动画的方式完成。即背景颜色不应该马上改变。背景颜色应在几秒钟内逐渐设置。

我已经写了这个，尽管它确实很好地设置了背景颜色，但它并没有逐渐做到：

// Subtle navigation on hover color animation

$(document).ready(function () {
    $(".navigation li").hover(

    function () {
        // Over
        $(this).animate(
        $(this).css("background", "rgba(159,223,188, 0.9)"),
        300);
    },

    function () {
        // Out            
        $(this).animate(
        $(this).css("background", "none"),
        300);
    }

    );
});

html很简单：

<ul class="navigation">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

感谢您提供正确方向的任何指示！

Answer 1

如果您想坚持使用 JavaScript 解决方案，请查看Color 动画插件。

或者，我建议使用 CSS3 过渡。你甚至不需要 JavaScript：

li {
    background-color: rgba(159,223,188, 0.9);
    -webkit-transition: background-color 0.3s linear;
    -moz-transition: background-color 0.3s linear;
    -ms-transition: background-color 0.3s linear;
    -o-transition: background-color 0.3s linear;
    transition: background-color 0.3s linear;
}

li:hover {
    background-color: transparent;
}

演示

先试后买

Answer 2

你应该这样做：

$(document).ready(function () {
    $(".navigation li").hover(

    function () {
        // Over
        $(this).animate({
            background: 'rgba(159,223,188, 0.9)'
        }, 300);
    },

    function () {
        // Out            
        $(this).animate({
            background: 'none'
        }, 300);
    }

    );
});

您不需要.css()，您只需将样式传递给.animate()函数。您还可以传递多个效果。

去这里了解更多信息。

Answer 3

您也可以尝试这样做：

将以下 CSS 添加到您的第二个函数

            "background": "none",
            "transition-property": "background",
            "transition-duration": "1s",
            "transition-timing-function": "linear"

检查下面的代码

您可以将 "transition-duration": "1s" 的值增加到任何秒以获得更多延迟。

希望这可以帮助

$(document).ready(function(){

    $(".navigation li").hover(

        function(){
            // Over
            $(this).animate(
                $(this).css("background","rgba(159,223,188, 0.9)"), 
               300
            );
        },
        function(){
            // Out            
            $(this).animate(
                $(this).css(
                    {
                    "background": "none",
                    "transition-property": "background",
                    "transition-duration": "1s",
                    "transition-timing-function": "linear"
                    }

                ), 
                300
            );
        }

    );
});