javascript - CSS，jQuery - 延迟失去最小高度的焦点

Question

我想在文本区域失去焦点时创建一个延迟。目前我有:

<textarea name="description"></textarea>

我的 CSS 读取

.my-form textarea {
 height: 35px;
}

.my-form textarea:focus {
 min-height: 100px;
}

在此下方有一个单选按钮切换。由于在焦点上添加了额外的像素，它被向下推，但是当试图点击一个按钮时它失去了焦点，高度回到原来的高度，你错过了点击。

有没有办法在失去焦点时创建一个延迟，比如 100 毫秒，刚好足以记录按钮上的点击？

Answer 1

使用 CSS

  .my-form textarea {
        height: 35px;
        transition: height 0.3s ease 1s;
    }

    .my-form textarea:focus {
        min-height: 100px;
    }

使用 JQUERY

 $(document).ready(function () {
            $('.my-form textarea').focusin(function () {
                $(this).css('height', '100px');
            });

            $('.my-form textarea').focusout(function () {
                setTimeout(function () { $('.my-form textarea').css('height', '35px'); }, 500);
            });
        });