带有内联块显示的 Div slideUp 和 slideDown 动画断断续续答案

【问题标题】：Div slideUp and slideDown animation choppy with inline-block display带有内联块显示的 Div slideUp 和 slideDown 动画断断续续
【发布时间】：2014-06-03 21:00:45
【问题描述】：

我的带有“加法”类的 div 滑动不顺畅，而是起伏不定。

当我将向下滑动的div设置为阻止显示时一切顺利，但我需要div在向下滑动后显示inline-block。

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

这是JSFiddle Demo。

注意：我想保持 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>

CSS

.addition {
    display: none;
}

jQuery

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

【问题讨论】：

标签： javascript jquery html css animation

【解决方案1】：

看看下面的小提琴http://jsfiddle.net/rFkP8/4/

试试下面的代码，它可以按照你的要求工作

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

如果您想减慢动画速度，只需根据自己的喜好增加时间即可：)

【讨论】：

这不会将显示属性设置为inline-block，而是block。
@DownVoters 与其来这里投票，不如帮助他。如果你来这里是为了帮助而不只是投反对票，那不是很好吗：/

【解决方案2】：

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

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

JSFiddle Demo

【讨论】：