jQuery实现画面的展开、收起和停止
主要用到动画效果中的三个操作
("#id").slideDown(3000); // 后面的数字表示效果的时长
("#id").stop();
("#id").slideUp(3000);
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>展开和收起</title> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#contain").slideDown(3000); }); $("#stop").click(function(){ $("#contain").stop(); }); $("#pack-up").click(function(){ $("#contain").slideUp(3000); }); }); </script> <style> html,body{ margin: 0; padding: 0; } #main{ width: 500px; margin: 0 auto; } #btn>button{ border-radius: 4px; font-size: 16px; background: rgb(127, 28, 150); color: rgb(223, 219, 219); outline: none; margin: 10px 0; } #panel{ width: 300px; color: #eee; font-family: cursive; text-align: center; } #title{ background-color: rgb(105, 24, 180); font-size: 20px; } #contain{ background-color:blueviolet; padding: 20px auto; } </style> </head> <body> <div id="main"> <div id="btn"> <button id="flip">展开</button> <button id="stop">停止</button> <button id="pack-up">收起</button> </div> <div id="panel"> <div id="title">初恋</div> <div id="contain">当初相遇苹果林,<br> 你才挽起少女的发型。<br> 前鬓插着如花的彩梳,<br> 映衬着你的娟娟玉容。<br><br> 你脉脉地伸出白净的手,<br> 捧起苹果向我相赠。<br> 淡红秋实溢清香啊!<br> 正如你我的一片初衷。<br><br> 我因痴情犹入梦境,<br> 一声叹息把你的青丝拂动。<br> 此时似饮合欢杯啊!<br> 杯中斟满了你的恋情。<br><br> 苹果林中树荫下,<br> 何时有了弯弯的小径?<br> 心中“宝塔”谁踏基?<br> 耳边犹响着你的细语声声……<br><br> </div> </div> </div> </body> </html>

- 版权申明:此文如未标注转载均为本站原创,自由转载请表明出处《龙行博客》。
- 本文网址:https://www.liaotaoo.cn/83.html
- 上篇文章:jQuery实现全选,反选,全不选
- 下篇文章:实现微信分享功能