jQuery animate removes element

user_13966038 0
Viewed 26

TL:DR

Instead of animating height reduction jQuery simply removes one of elements, while properly animating others. Please see fiddle: https://jsfiddle.net/qyac3v1z/5/

Complete version

I have a horizontaly shaped div which has an embedded div shaped vertically. In the vertical div I have another 2 divs acting as borders. I want to animate it's height reduction to make it to act like a dropdown menu. I have a simple jQuery function to achieve that.

function maximizeCleaningCard () {

    $('.cleaning_card_right_right_border, .cleaning_card_right_left_border').animate({height: 0}, 1000)
    $('.cleaning_card_right').animate({height: 80}, 1000)
    
}

However, instead of animating .cleaning_card_right_right_border it simply removes it. If I will remove 2nd line $('.cleaning_card_right').animate({height: 80}, 1000) it works perfectly fine. What could be my problem? Please see fiddle for code.

css html jquery
1 Answers

It's basically a CSS problem, because jQuery adds overflow: hidden when animating. So you have to set the overflow to visible for the parent container:

.cleaning_card_right {
    display: inline-block;
    position: absolute;
    height: 500px;
    background-color: white;
    width: 25%;
    margin-left: 75%;
    border-bottom: 1px solid black;
    overflow: visible !important;
}

Alternatively you can make sure the child element is completely within you parent container.

user_43511820
Related