Jquery滑动开关操作（slideDown, slideUp, slideToggle）
#滑动开关很好玩CSS代码JS代码HTML代码效果图#滑动开关很好玩
这个章节主要是学习用Jquery的slideDown, slideUp, slideToggle写一个小功能，很简单。
CSS代码
<style>div{width:400px;height:200px;border:dashed 1px #eaeaea;position:relative;float:left;margin-right:20px;padding:10px;background-color:#f8f8f8;}</style>
JS代码
<script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){$(".textarea_one").hide();$(".down").click(function(){$(".textarea_one").slideDown(500);});//$(".textarea_two").hide();$(".up").click(function(){$(".textarea_two").slideUp(500);});$(".textarea_three").hide();$(".toggle").click(function(){$(".textarea_three").slideToggle(500);});});</script>
HTML代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>My second Jquery web app</title><style>div{width:400px;height:200px;border:dashed 1px #eaeaea;position:relative;float:left;margin-right:20px;padding:10px;background-color:#f8f8f8;}</style><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){$(".textarea_one").hide();$(".down").click(function(){$(".textarea_one").slideDown(500);});//$(".textarea_two").hide();$(".up").click(function(){$(".textarea_two").slideUp(500);});$(".textarea_three").hide();$(".toggle").click(function(){$(".textarea_three").slideToggle(500);});});</script></head><body><div><h1>Jquery向下滑动测试</h1><br/><p class="down" style="cursor: pointer;">单击我向下滑动</p><p class="textarea_one">这里是区域的内容</p></div><div><h1>Jquery向上滑动测试</h1><br/><p class="up" style="cursor: pointer;">单击我向上滑动</p><p class="textarea_two">这里是区域的内容</p></div><div><h1>Jquery切换滑动测试</h1><br/><p class="toggle" style="cursor: pointer;">单击我切换滑动</p><p class="textarea_three">这里是区域的内容</p></div></body></html>
