用jQuery改变背景颜色没反应

<style type="text/css">
        div{
            margin: 0 auto;
            width: 300px;
            height: 300px;
            background-color: #333;
        }
    </style>
</head>
<body>
    <div>
        
    </div>

    <script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("div").click(function(){
                $(this).animate({
                    backgroundColor: "#eee"
                },1000);
            })
        })
    </script>

$(document).ready(function(){
            $("div").click(function(){
                $(this).animate({
                    background: "#eee"
                },1000);
            })
        })

jquery 自身的 animate 是没有实现 background-color 的动画的。可以使用插件扩展，或者css3动画。

$(document).ready(function(){
            $("div").click(function(){
                this.animate({
                    backgroundColor: "#eee"
                },1000);
            })
        })

这里的this指向的是对应div的原生DOMElement对象，而不是JQuery对象，改为以下代码即可:

$(this).animate({
    backgroundColor: "#eee"
},1000);

另外，animate没有实现对颜色的渐变，可以通过在css中设置动画渐变transition，然后js通过修改类名或者样式来达到颜色渐变的效果。

this要转成jQuery对象，这样用
$(this).animate()

【热门文章】