DIV效果基本show和动画了slideDown与波涛汹涌的内联块显示屏 [英] Div slideUp and slideDown animation choppy with inline-block display

问题描述

我用加法类的div不滑动顺畅，而是波涛汹涌和神经质。

一切顺利的话，当我定下的div块显示的幻灯片，但我需要在div滑下后显示的 inline-block的

我已经在这里尝试从一些可能的解决方案没有任何运气。

下面是一个 的jsfiddle演示 。

的注：我想保持的HTML结构不变。我已经简化了code用于演示目的。的

HTML

 ＆LT; D​​IV CLASS =输入＆GT;
    ＆LT;标签＆gt;名称和LT; /标签＆gt;
    ＆LT;输入类型=文本＆GT;
    ＆LT;输入类型=文本＆GT;
    ＆LT; D​​IV＆GT;
        ＆LT; D​​IV CLASS =加法＆GT;输入另外＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; D​​IV CLASS =输入＆GT;
    ＆LT;标签＆gt;舒适LT; /标签＆gt;
    ＆LT;输入类型=文本＆GT;
＆LT; / DIV＆GT;
 

CSS

  .addition {
    显示：无;
}
 

的jQuery

  $（函数（）{
    $（'输入'）。在（焦点模糊，功能（E）{
        $（本）.closest（'DIV'）。找到（'。除了'）[e.type ==='专注'？ '了slideDown'：'效果基本show（快）的CSS（'显示器'，'inline-block的'）。
    }）
}）;
 

解决方案

我通过动画父分区，而不是找到一个解决办法。

  $（'输入'）。在（焦点模糊，功能（E）{
    $（本）.siblings（'DIV'）=== e.type焦点？ '了slideDown'：'效果基本show'（'快'）;
}）
 

的jsfiddle演示

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

解决方案

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

这篇关于DIV效果基本show和动画了slideDown与波涛汹涌的内联块显示屏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！