我的 JQuery 动画不会从中心展开

Question

jsfiddle

$(document).ready(function() {
    $(".button").click(function(){
        $(".circle-div").animate({width: "300px"});
    });
});

我正在尝试让 div 扩展为 300px 的宽度。当我写它时，它只向右扩展，而不是从 p 标签的中心。我做错了什么？

当我在 W3schools 乱搞时它工作正常，只是将 div 居中并将宽度更改为高度，但它在我的工作区中不起作用？

Answer 1

需要为它添加一个容器，并将里面的内容居中对齐，这样当它展开的时候就好像它是从中心展开的一样。

检查这是否有帮助 -

$(document).ready(function() {
    
    
    $(".button").click(function(){
        $(".circle-div").animate({width: "300px"});
    });

    
});

p {
    padding: 5px;
    font-size: 25px;
    color: white;
    background-color: yellowgreen;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    text-align: center;
    position: fixed;
    bottom: 15px;
    left: 50%;
    right: 50%;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.19);
}

p:hover {
    color: #f0f;
}

.circle-div {
    background-color: green;
    border-radius: 50px;
    display: inline-block;
    height: 50px;
    position: relative;
    width: 50px;
}

.container {
    bottom: 3.49%;
    display: block;
    position: absolute;
    text-align: center;
    width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
 <div class="circle-div"> 
      <p class="button">+</p>
  </div>
</div>