Div Slideup And Slidedown Animation Choppy With Inline-block Display

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

Solution 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

Solution 2:

Take a look at following fiddle http://jsfiddle.net/rFkP8/4/

Try the following code, it is working as per your requirements

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

If you want to slow down animation just increase the time as per your likings :)