Question

我正在尝试在JQuery中使用背景动画方法，但它只是不起作用。这是我正在使用的代码。

$(".menu_item").mouseenter(function(){$(this).animate({backgroundColor: "#FF8040"}, 'fast');});
$(".menu_item").mouseleave(function(){$(this).animate({backgroundColor: "#999"}, 'fast');});

感谢任何帮助。

继承其余部分。

菜单的Html：

<div id="menu">
    <a href="index.html" id="home_menu" class="menu_item">Home</a>
    <a href="index.html" class="menu_item">Tutorials</a>
    <a href="index.html" class="menu_item">News</a>
</div>

和脚本：

<script type="text/javascript">
    $(document).ready(function(){

        jQuery().ready(function(){
            $(".menu_item").mouseenter(function(){$(this).animate({backgroundColor: "#FF8040"}, 'fast');});
            $(".menu_item").mouseleave(function(){$(this).animate({backgroundColor: "#999"}, 'fast');});

            var pos = $("#fixed_head").position();
            var height = $("#fixed_head").height();
            var height2 = $("#menu").height();

            var screenHeight = $("body").height();
            var newHeight = screenHeight - height - height2;
            $("#container").css("top", (pos.top + height));
            $("#container").css("height", newHeight);
            $("#content").css("height", newHeight);

            $(window).resize(function() {
                var pos = $("#fixed_head").position();
                var height = $("#fixed_head").height();
                var height2 = $("#menu").height();

                var screenHeight = $("body").height();
                var newHeight = screenHeight - height - height2;
                $("#container").css("top", (pos.top + height));
                $("#container").css("height", newHeight);
                $("#content").css("height", newHeight);
            });

        });

    });
    </script>

并在脑海中：

<script type="text/javascript" src="jquery.js"></script>

Answer 1

如果你使用jQuery UI库，你的代码应该可行。它具有animate方法的颜色过渡效果。

另一种写作方式是：

$(".menu_item").hover(function() {
    $(this).animate({
        backgroundColor: "#FF8040"
    }, 'fast');
}, function() {
    $(this).animate({
        backgroundColor: "#999"
    }, 'fast');
});

DEMO： http://jsfiddle.net/kbKdY/

Answer 2

我认为你错过了head部分的jQuery UI 1.8.18文件。

例如：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

Answer 3

嗯，这不是你问题的直接答案，但为什么不使用CSS过渡？

但是，您可以使用jQuery在鼠标事件上添加/删除类。

CSS转换速度快（比JS动画更快）并且非常可靠。如果浏览器不支持css过渡，背景颜色将会改变（但不会有动画/过渡） - 这是一个双赢局面。

示例代码：http://jsfiddle.net/GuSQx/

Jquery背景动画

3 个答案: