CSS, jQuery - delay on losing focus with min-height

Question

I want to create a delay upon losing focus of a textarea. Currently I have:

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

My CSS reads

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

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

There is a radio button toggle right beneath this. It gets pushed down because of the extra pixels added on focus, but when trying to click on a button it loses its focus, the height goes back to the original, and you miss the click.

Is there a way to create a delay when losing focus for say 100 ms, just enough to register the click on the buttons?

Answer 1

Using CSS

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

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

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