我正在使用 jQuery 为我的导航按钮提供悬停时的颜色变化动画。
我有 .menu-horizontal
和 .menu-vertical
。但出于某种原因,动画功能适用于 .menu-horizontal
但不适用于 .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>
最佳答案
您不能单独使用 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
动画。
关于jQuery动画问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7115843/