bwpKIZwD - 38天前注册会员;
jRAbGRXk - 91天前注册会员;
jxE5lfJy - 99天前注册会员;
rpwduZhI - 104天前注册会员;
听风于梦 - 127天前注册会员;
加入我们(58 )

jq实现评论框触发放大特效

jq实现评论框触发放大特效,其实也不复杂,但是伴随些许人性化的特效还是很不错的

默认

鼠标点击触发

QQ图片20211006133208.png

JQ代码

$("#comment_s").focus(function(){
    $("#comment_s").addClass("expand"); 
});
$("#comment_s").blur(function(){
    $("#comment_s").removeClass("expand"); 
});

css

.respond #new_comment_form .expand{ height:120px !important; }
.respond #new_comment_form textarea{line-height:1.8;resize:none;transition: height .3s ease-in-out;}

实现原理,触发事件的时候添加expand的样式类,使得textarea产生了120px的高度变化,为了让特效变化丰富,记得加上去transition: height .3s ease-in-out的css动画效果

即可~

声明:本站原创文章文字版权归本站所有,转载务必注明作者和出处;本站转载文章仅仅代表原作者观点,不代表本站立场,图文版权归原作者所有。如有侵权,请联系我们删除。