Question

我有一个父元素，它包含多个子元素。我有一个点击功能，隐藏所有其他孩子，除了点击的孩子。

由于父亲的宽度为自动，因此当儿童被隐藏时，宽度会发生变化。

现在我希望调整大小有一个转换，但是虽然我在父元素上使用转换，但它没有做任何事情：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以简单地为hide()功能添加持续时间：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你不应该只是简单地隐藏（）来获得过渡吗？如果你这样做会怎么样：

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

删除子元素时的转换大小

2 个答案: