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

Answer 2

你可以尝试css3过渡

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

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

这是一个示例： http : //jsfiddle.net/689gv/1/