那么在前面的文章中，也已经给大家介绍了用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大看点，从防dRM流利的英文演讲开场，到最后防d内 心告白曾想解散，全场零冷场。</div></div></body></HTML>当我们点击关闭按钮时，就会通过animate()方法将包含文字的div宽度缓慢变为0，达到点击收缩的动画效果。
当我们点击展开按钮时，同样会通过animate()方法，但此时就是将宽度为0的div恢复到原始尺寸，达成点击展开的动画效果。
效果如下图所示：
animate() 方法执行 CSS 属性集的自定义动画。
该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。
本篇文章就是关于jquery实现文字左右展开收缩的动画效果的方法介绍，也很简单，希望对需要的朋友有所帮助！ 总结
以上是内存溢出为你收集整理的怎么用jquery实现文字左右展开收缩效果全部内容，希望文章能够帮你解决怎么用jquery实现文字左右展开收缩效果所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）