怎么用jquery实现文字左右展开收缩效果

互联网 18-12-17

jquery实现点击按钮时，文字左右展开收缩效果，可以使用jQuery animate()方法来实现，Query animate()方法可以模拟类似于slideUp()和slideDown()这些效果。

那么在前面的文章中，也已经给大家介绍了用jquery实现点击展开收缩效果（上下）的方法。

下面我们就继续结合代码示例，给大家介绍jquery实现文字左右展开收缩效果的方法。

代码示例如下：

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="utf-8">     <title>jquery实现文字左右展开收缩效果示例</title>     <style type="text/css">  .box{             float:left;  overflow: hidden;  background: #f0e68c;  }          .box-inner{             width: 400px;  padding: 10px;  border: 1px solid #a29415;  }     </style>     <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>     <script type="text/javascript">  $(function () {             var boxWidth = $(".box").width();  $(".slide-left").click(function(){                 $(".box").animate({                     width: 0  });  });  $(".slide-right").click(function(){                 $(".box").animate({                     width: boxWidth                 });  });  });  </script> </head> <body> <button type="button" class="slide-left">关闭</button> <button type="button" class="slide-right">展开</button> <hr> <div class="box">     <div class="box-inner">新浪娱乐讯 据台湾媒体报道，2018MAMA香港场14日晚间7点盛大展开颁奖典礼，嘻哈、性感、抒情各种团体     合作的舞台表演精彩绝伦，《ETtoday》全程独家直播典礼现场，为观众快速整理8大看点，从防弹RM流利的英文演讲开场，到最后防弹内     心告白曾想解散，全场零冷场。</div> </div> </body> </html>

当我们点击关闭按钮时，就会通过animate()方法将包含文字的div宽度缓慢变为0，达到点击收缩的动画效果。

当我们点击展开按钮时，同样会通过animate()方法，但此时就是将宽度为0的div恢复到原始尺寸，达成点击展开的动画效果。

效果如下图所示：