-1

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');
    })
});
Community
  • 1
  • 1
Kid Diamond
  • 2,232
  • 8
  • 37
  • 79

2 Answers2

0

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

Kid Diamond
  • 2,232
  • 8
  • 37
  • 79
-1

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

Richa
  • 3,261
  • 2
  • 27
  • 51
  • This does not set the display property to inline-block, but block. – Kid Diamond Apr 19 '14 at 12:19
  • 2
    @DownVoters Instead of coming here and down voting, can't you help him. Wouldn't it be nice if you come here to help and not just downvote :/ – Richa Apr 19 '14 at 12:30