3

我完全困惑为什么这个简单的 jQuery 脚本不起作用。我从我的另一个项目（代码在其中工作）中复制并粘贴了代码，只是更改了类标签。

<html>
<head>
    <title>test page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('.click_item').click(
                function() {
                    $(this).animate({background: '#ffffff'}, 200);
                },
                function() {
                    $(this).animate({background: '#d0d0d0'}, 200);
                }
            );
    }) 
    </script>
    <style type="text/css">
        #one {
            height: 300px;
            width: 1000px;
            background-color: #a0a0a0;
        }
        .click_item {
            width: 100px;
            height: 30px;
            margin: 0px auto;
            margin-bottom: 10px;
            background: #d0d0d0;
            -moz-transition: background linear;
            -webkit-transition: background linear;
        }
    </style>
</head>

<body>

    <div id="one">
        <div id="map_options_box">
            <div id="kml1" class="click_item">item 1</div>
            <div id="kml2" class="click_item">item 2</div>
        </div>
    </div>

</body>

我还尝试使用 #kml1 和 #kml2 ID 标签代替 class 和 'this' 标签，以及将点击功能替换为悬停和切换，但仍然无效。我也没有在控制台中收到任何错误。

4

2 回答 2

12

您将需要包含jQuery 颜色动画插件。因为原生 jquery 不支持此功能

于 2012-09-14T19:50:47.997 回答
1

尝试：

<script type="text/javascript">
$(document).ready(function() {
        $('.click_item').click(
            function() {
                $(this).animate({background: '#ffffff'}, 200);
            },
            function() {
                $(this).animate({background: '#d0d0d0'}, 200);
            }
        );
});
</script>
于 2012-09-14T19:53:39.607 回答