jQuery动画问题

Question

我正在使用 jQuery 为我的导航按钮提供悬停时的颜色变化动画。

我有 .menu-horizo​​ntal 和 .menu-vertical。但出于某种原因，动画功能适用于 .menu-horizo​​ntal 但不适用于 .menu-vertical。

垂直菜单的颜色不变。

<script type="text/ecmascript">
$(document).ready(function () {
    $(".menu-horizontal ul li a").hover(function() {
        $(this).stop().animate({ height: "31px", backgroundColor: "#3185b7" }, 600);
    }, function() {
        $(this).stop().animate({ height: "31px", backgroundColor: "#4fb3d3" }, 600);
    });

    $(".menu-vertical ul li a").hover(function() {
        $(this).stop().animate({ height: "31px", backgroundColor: "#3185b7" }, 600);
    }, function() {
        $(this).stop().animate({ height: "31px", backgroundColor: "#4fb3d3" }, 600);
    });              
});
</script>

Answer 1

您不能单独使用 jQuery 为 background-color 设置动画。

(For example, width, height, or left can be animated but background-color cannot be.)

来源:http://api.jquery.com/animate/#animation-properties

选项 1:首先使用 .css() 设置 background-color，然后设置高度动画。

选项 2:使用 plugin促进 background-color 动画。