Question

jsfiddle

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

我试图将div扩展宽度为300px。当我写它时，它只扩展到右边，而不是p标签的中心。我做错了什么？

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

Answer 1

需要为其添加容器并将内容居中对齐，这样当它展开时，它似乎正在从中心扩展。

检查这是否有帮助 -

＆＃13;

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

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: