Div slideUp和slideDown动画采用内嵌块显示

Div slideUp and slideDown animation choppy with inline-block display

本文关键字：显示 slideUp slideDown 动画 Div      更新时间：2023-09-26

我的带有"addition"类的div并不是平稳滑动的，而是断断续续的。

当我将向下滑动的div设置为块显示时，一切都很顺利，但我需要div在向下滑动后显示内联块。

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

这是一个JSFiddle演示。

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

我找到了一个变通方法，改为对父div设置动画。

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

JSFiddle演示

看看下面的fiddlehttp://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');
    })
});

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

相关文章：