Question

我想在失去textarea的焦点时制造延迟。目前我有：

<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/

CSS，jQuery - 用min-height延迟失去焦点

2 个答案: