2

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

I've seen several posts similar to this one but haven't yet found a solution that works.

I'm using jQuery to animate the position of a child element. When the child element is animated, it moves beyond the boundaries of its containing <div>. It displays similarly when overflow: visible; is specified.

If I do not specify any overflow property on the container, it simply is displayed outside the parent div. If I specify overflow: auto; on the parent div, scroll bars are added to the div. Note that the div expands only the proper amount to contain the new dimensions of the child element, but not to encompass the position of the child element.

Can I cause the parent <div> to expand to fully encompass the position of the child?

Hanzy
  • 394
  • 4
  • 17
  • Why not also animate the width of the parent container to be 250px wider and 300px taller (if the starting position of the child is 0, 0), or whatever width and height is needed to show the new dimensions and position of the button – Pete Jul 25 '19 at 15:26
  • @Pete I had considered that but wondered if there was a way with css to do it dynamically. Maybe not? – Hanzy Jul 25 '19 at 15:31

0 Answers0