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。

Answer 2

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

.yourelement { 
    background-color: #FFF; 
}

现在它应该可以在Firefox和IE中使用....

jQuery彩色动画插件无法在IE或Firefox中运行

2 个答案: