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 animation plugin。

或者我建议使用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;
}

<强>演示

Try before buy

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()功能即可。你也可以传递多种效果。

转到here了解详情。

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

    );
});

逐渐悬停在列表项上的背景颜色更改

3 个答案: