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

    0 118

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

默认效果

鼠标点击触发

jq代码:

//评论框
$("#comment").focus(function(){
    $("#comment").addClass("expand"); 
});
$("#comment").blur(function(){
    $("#comment").removeClass("expand"); 
});

CSS

#respond_box .comarea .expand{ height:110px !important; }
#respond_box .comarea textarea{line-height:1.8;resize:none;transition: height .3s ease-in-out;}

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

即可~

Comments | NOTHING

您必须登录注册发表评论

游客,您好

*邮箱和昵称必须填写