Javascript Div slideUp和slideDown动画具有内嵌块显示

我的div加了“加法”班，滑得不是很平稳，而是波涛汹涌

当我将slide down div设置为block display时，一切都进行得很顺利，但我需要该div在向下滑动后显示inline block

我已经尝试了一些可能的解决方案，但没有任何运气

这是一本书

注意：我想保持HTML结构不变。为了演示，我简化了代码

HTML

<div class="input">
    <label>Name</label>
    <input type="text">
    <input type="text">
    <div>
        <div class="addition">Input addition</div>
    </div>
</div>
<div class="input">
    <label>Rest</label>
    <input type="text">
</div>

jQuery

$(function() {    
    $('input').on('focus blur', function(e){
        $(this).closest('div').find('.addition')[e.type === 'focus' ? 'slideDown' : 'slideUp']('fast').css('display', 'inline-block');
    })
});

---

看看下面的小提琴

请尝试以下代码，它正按照您的要求工作

  $(function() {    
    $('input').on('focus blur', function(e){
        $(this).closest('div').find('.addition')[e.type === 'focus' ? 'slideDown' : 'slideUp'](100)('stable').css('display', 'inline-block');
    })
});

---

如果你想放慢动画的速度，只需根据你的喜好增加时间：）

我找到了一个解决办法，改为设置父div的动画

$('input').on('focus blur', function(e){
    $(this).siblings('div')[e.type === 'focus' ? 'slideDown' : 'slideUp']('fast');
})

---

这并没有将display属性设置为inline block，而是block。@DownVorters不来这里投票，你不能帮他吗。如果你来这里帮忙，而不是投反对票，那不是很好吗/

$('input').on('focus blur', function(e){
    $(this).siblings('div')[e.type === 'focus' ? 'slideDown' : 'slideUp']('fast');
})