CODEWITHSUNDEEP
jquerycss
Zoker
Zoker

Reputation: 2059

Transition size when child element gets removed

I have a parent element, that contains multiple child elements. I have an on click function, that hides all other children, except for the clicked one.

Since the parent's width is auto, the width changes, when the children get hidden.

Now I want the resizing to have a transition, but although I use a transition on the parent element, it doesn't do anything:

$('.child').on('click', function() {
	$(this).siblings().hide()
});
.parent {
    transition: 0.3s all ease;
    width: auto;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-evenly;
    background: #000;
    color: #fff;
}

.child {
    width: 100px;
    height: 100px;
    background: red;
    margin: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

Upvotes: 1

Views: 121

Answers (2)

Temani Afif
Temani Afif

Reputation: 272994

You may simply add duration to the hide() function:

$('.child').on('click', function() {
	$(this).siblings().hide(500)
});
.parent {
    transition: 0.3s all ease;
    width: auto;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-evenly;
    background: #000;
    color: #fff;
}

.child {
    width: 100px;
    height: 100px!important; /* Added important to fade only the width*/
    background: red;
    margin: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

Upvotes: 1

Herco
Herco

Reputation: 342

Shouldn't you be doing more than simply hide() to get a transition? What if you do something like this:

$('.child').on('click', function() {
    $(this).siblings().fadeOut()
});

Upvotes: 0

Related Questions