jQuery 彩色动画插件在 IE 或 Firefox 中不起作用答案

【问题标题】：jQuery color animation plugin not working in IE or FirefoxjQuery 彩色动画插件在 IE 或 Firefox 中不起作用
【发布时间】：2012-02-25 21:11:26
【问题描述】：

我已经查看了这里，但无法找出为什么它不能正常工作。我想在悬停时对颜色背景进行简单的淡化。它仅适用于 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>

查询：

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

【问题讨论】：

默认情况下，jQuery 不能为颜色设置动画。如果您使用的是插件，请编辑您的原始帖子以包含缺少的信息并添加指向插件网站的链接。
Sparky 是正确的。我相信 jquery UI 1.8 解决了动画颜色的问题。只需包含 jquery ui，它应该可以工作。
这可能是一个愚蠢的答案，但你有没有尝试过 $(document).ready(function() {...})
@JamesL.，虽然 jQueryUI 也允许颜色动画...如果 OP 已经在使用颜色动画插件，则不需要 jQueryUI，jquery.animate-colors.js
看到这个stackoverflow.com/questions/530866/…，它可能会有所帮助

标签： jquery colors jquery-animate

【解决方案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。

【讨论】：

【解决方案2】：

确保元素在 CSS 中预定义了背景色。

.yourelement { 
    background-color: #FFF; 
}

现在它应该可以在 Firefox 和 IE 中运行了......

【讨论】：