Question

// animate button
$(document).ready(function() {
    $("#animateButton").click(function() {
        $("#animateButton").animate({
            left: '250px',
            top: '300px',
            opaticy: '0.5px',
            height: '150px',
            width: '350px',
        });
    });
});

* {
    box-sizing: border-box;
}

button {
    background-color: #685173;
    border: none;
    color: white;
    padding: 1rem;
    display: inline-block;
    font-size: 1.5rem;
    margin: 4px 2px;
    cursor: pointer;
    transition: 0.1s;
    position: relative;
}

button:hover {
    background-color: #483850;
    box-shadow: 2px 2px 5px rgb(120, 148, 158), 2px 2px 2px darkslategrey ;
    transform: translate(-2px, -2px);
}

button:active {
    transform: translate(2px, 2px);
}

.header{
    background-color: black;
    padding: 2rem;
    overflow: visible;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>

    <div class="header clearfix">
        <button class="btn btn-primary p-3" id="animateButton">Start Animation</button>
    </div>

</body>

我已经看到了几篇类似的文章，但是还没有找到可行的解决方案。

我正在使用jQuery动画子元素的位置。当子元素具有动画效果时，它会超出其包含<div>的边界。指定overflow: visible;时，其显示类似。

如果我没有在容器上指定任何overflow属性，它只会显示在父div的外部。如果我在父div上指定overflow: auto;，则会将滚动条添加到div。请注意，div仅扩展适当的数量以包含子元素的新尺寸，但不包含子元素的位置。

我可以使父母<div>展开以完全涵盖孩子的位置吗？

动画子元素时，jQuery展开父div

0 个答案: