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動畫問題

回答

相關問題