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

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

默认

QQ图片20211006132938.png

鼠标点击触发

QQ图片20211006133208.png

JQ代码

  1. $("#comment_s").focus(function(){
  2. $("#comment_s").addClass("expand");
  3. });
  4. $("#comment_s").blur(function(){
  5. $("#comment_s").removeClass("expand");
  6. });

css

  1. .respond #new_comment_form .expand{ height:120px !important; }
  2. .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动画效果

即可~

文章由官网发布,如若转载,请注明出处:https://www.veimoz.com/1068
1 条评论
2.3k

发表评论

!