javascript - Div slideUp and slideDown animation choppy with inline-block display

Question

My div with an "addition" class is not sliding smoothly, but rather choppy and jumpy.

Everything goes smoothly when I set the slide down div to block display, but I need the div to display inline-block after sliding down.

I have tried some possible solutions from here without any luck.

Here is a JSFiddle Demo.

Note: I want to keep the HTML structure as is. I have simplified the code for demonstration purposes.

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');
    })
});

Answer 1

I found a workaround by animating the parent div instead.

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

JSFiddle Demo