jquery slideDown效果

zoukankan html css js c++ java

jquery slideDown效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Test</title> <style> .parent {background-color:red;200px;height:150px;position: absolute;overflow: hidden;} .son{ border: 4px greenyellow solid; background: #a9ea00;100px;height:140px;top:-148px;position: relative;} .JQson{ border: 4px greenyellow solid; background: #a9ea00;100px;height:140px;display:none;position: relative;} </style> <script src="http://common.cnblogs.com/script/jquery.js"></script> <script> $(function() { $("#mySlideDown").click(function() { var son = $(".son") son.css("top", -1 * son.outerHeight()) $(".son").animate({top: 0}, 1000) }) $("#jQslideDown").click(function() { // alert( $(".JQson")[0]) // $(".JQson").height(0) $(".JQson").slideDown(1000) }) }) </script> </head> <body> <table> <tr> <td width="300"> <button id="mySlideDown" type="button">我的slideDown</button> <div class="parent"> <div class="son"> <div>1111111</div> <div>2222222</div> <div>3333333</div> <div>4444444</div> <div>5555555</div> <div>6666666</div> <div>7777777</div> </div> </div> </td> <td width="300"> <button type="button"id="jQslideDown">jQslideDown</button> <div class="JQson"> <div>1111111</div> <div>2222222</div> <div>3333333</div> <div>4444444</div> <div>5555555</div> <div>6666666</div> <div>7777777</div> </div> </td> </tr> </table> </body> </html>

点击运行可以看到效果，JQ自带的有副作用，影响到原有布局，是能过改变自身的高度实现，如果它里面的内容是用SPAN等堆砌的，它们会挤在一起，然后慢慢变成你想要的样子。我的是通过两个元素实现的，外围与内部的等高，外围的要求overflow:hidden，防止内部的要一开始放到上方时被暴露出来。然后慢慢改变top，与现实中的窗帘降下效果一致。
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <style> #hide{ overflow: hidden; 200px; height:0px; position:relative; border:1px solid red; } #show{ position: absolute; left:0px; background: green; padding:0px; margin:0px; top:-200px; height: 100px; 200px; } #content{ 200px; height:200px; background: #a9ea00; } </style> <script src="http://common.cnblogs.com/script/jquery.js"></script> <script> $(function() { $("button").click(function() { var hide = $("#hide") if (hide.height()) { hide.css("overflow", "hidden") hide.animate({ height: 0 }, 1000) $("#show").animate({ top: -200 }, 1000) } else { hide.animate({ height: 200 }, 1000, function() { $(this).css("overflow", "visible") }) $("#show").animate({ top: 0 }, 1000) } }) }) </script> </head> <body> <div id="hide"> <div id="show"> <div id="content"> <div>111111111</div> <div>22222222</div> <div>333333333</div> <div>44444444444</div> <div>555555555</div> </div> </div> </div> <button type="button">toggle</button> </body> </html>

查看全文

相关阅读:
js设计模式（一）---单例模式
 JavaScript---设计模式总结
 js设计模式---单例模式
 js设计模式---工厂模式
 react学习笔记01
css常用布局
 js 继承
 vue路由动态加载
 vue 项目总结
 css文字两端对齐

原文地址：https://www.cnblogs.com/rubylouvre/p/3437703.html