0

我正在尝试在 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>
4

3 回答 3

1

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

另一种写法是：

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

演示：http: //jsfiddle.net/kbKdY/

于 2012-05-28T21:31:15.740 回答
1

我认为您缺少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>
于 2012-05-28T21:39:03.390 回答
0

好吧，这不是您问题的直接答案，但是您为什么不使用 CSS 过渡呢？

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

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

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

于 2012-05-28T21:35:26.267 回答