Question

我的div有一个＆＃34;添加＆＃34;班级不是顺畅地滑动，而是波涛汹涌和跳跃。

当我将滑下div设置为阻止显示时，一切顺利，但我需要div在滑下后显示内联块。

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

注意：我希望保持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');
    })
});

Answer 1

我通过设置父div的动画来找到解决方法。

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

JSFiddle Demo

Answer 2

请看下面的小提琴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');
    })
});

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

Div slideUp和slideDown动画不稳定，带有内联块显示

2 个答案: