列表项目上的悬停背景颜色渐变

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
            );
        }

    );
});