jQuery动画问题

我正在使用jQuery为悬停上的导航按钮提供颜色更改动画。我有.menu-horizontal和.menu-vertical。但由于某种原因，动画功能与.menu-horizontal配合良好，但不适用于.menu-vertical。jQuery动画问题

垂直菜单的颜色不会改变。

<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>

来源

2011-08-19 Aaroninau

这不会解决您的问题，但是您是否意识到您可以将代码缩减一半？你不需要写出两次代码，你可以在两个选择器中放置：'$（“。menu-horizontal ul li a，.menu-vertical ul li a”）。hover（function（）{' – tw16

你不能用jQuery单独动画background-color。

（例如，宽度，高度，或左可以是动画但background-color是不可能的。）

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

选项1：设置background-color首先使用.css()和然后制作高度的动画。

选项2：使用plugin来促成background-color动画。

来源

2011-08-19 01:41:53 tw16

jQuery动画问题

回答

相关问题