jQuery 彩色动画插件无法在 IE 或 Firefox 中工作

Question

我环顾四周，但无法找出为什么它不能正常工作。我想在悬停时在颜色背景中进行简单的淡入淡出。它仅适用于 Chrome，不适用于 Firefox 或 IE。任何帮助将不胜感激!

HTML:

<div id="sidemenu">
        <a href="#">Spiritual Ceremonies</a>
            <a href="#">Flower Ceremony</a>
            <a href="#">Ceremony Four Elements</a>
            <a href="#">Butterfly Ceremony</a>
            <a href="#">Non Denomination Ceremony</a>
            <a href="#">Mayan Wedding Ceremony</a>
            <a href="#" id="no">Civil Mexican Ceremony</a>
</div>

JQUERY:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="../js/jquery.animate-colors.js"></script>
<script>
$("#sidemenu>a").hover(function() {
        $(this).animate({backgroundColor: "#943939",color: "#fff"}, 150 )}
        ,function() {
        $(this).animate({backgroundColor: "#dcacbb",color: "#8e5769"}, 150 );
        });             
</script>

Answer 1

其他用户已经发布的正确答案消失了，因此我再次发布它以及更多解释和工作演示。

将您的代码放在 $(document).ready() 函数中，因为在调用您的代码时显然不存在任何相关的 DOM 元素。 $(document).ready() 仅在 DOM 完全加载后才会触发，从而允许正确操作或目标元素。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="../js/jquery.animate-colors.js"></script>
<script type="text/javascript">

$(document).ready(function() {

    $("#sidemenu>a").hover(
        function() {
            $(this).animate({backgroundColor: "#943939",color: "#fff"}, 150 )
        },function() {
            $(this).animate({backgroundColor: "#dcacbb",color: "#8e5769"}, 150 );
    });  

});

</script>

jsFiddle DEMO

演示假设您使用 this plugin .