javascript - Jquery:无法让动画工作

Question

<div class="col-md-3" id="button1">
    <p id="text1">Button1</p>
</div>
<div class="col-md-3" id="animate1"></div>

#animate1 {
    margin-left:1%;
    margin-right:1%;
    width:23%;
    background-color:blue;
}

#button1 {
    background-color:white;
    text-align:center;
    margin-left:1%;
    margin-right:1%;
    width:23%;
    margin-top:0%;
    margin-bottom:0%;
    padding-top:1.5%;
    padding-bottom:1.5%;
}

#button1:hover {
    background-color:red;
}

$("#button1").click(function () {
    $("#animate1").animate({
        "width": "70%",
            "left": "+=50px"
    }, "slow");
});

我想使用 Jquery 来做一些动画。我想要实现的是当单击button1时，animate1会移动并改变宽度。然而它根本行不通......

有什么可能的解决方案吗？非常感谢。

Answer 1

<div>您想要设置动画的元素没有高度。动画有效，只是你看不到而已。设置任意高度即可。