1、显示隐藏
显示:$(selector).show(speed,callback);
隐藏:$(selector).hide(speed,callback);
speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒
可选的 callback 参数是隐藏或显示完成后所执行的函数名称
html: <div class="ex"> <button class="hide">点我隐藏</button> </div> <button class="show">点我显示</button>
css: div.ex{ 200px; height: 100px; background: yellow; }
jq: <script> //点击按钮隐藏div $(function(){ $(".ex .hide").click(function(){ //.ex后要加空格 $(this).parents(".ex").hide("slow"); //this指class为hide的button }); }); $(function(){ $(".show").click(function(){ $(this).prev(".ex").show("slow"); }); }); </script>
2、带参数的hide()方法和带参数的hide()方法,并使用回调函数
jq: //带有speed参数的隐藏方法 $(function(){ $(".hide").click(function(){ $(".ex").hide(1000); }); }); //带有speed参数的隐藏方法,并使用回调函数 $(function(){ $(".hide").click(function(){ $(".ex").hide(1000,"linear",function(){//第二个参数是一个字符串,表示过渡使用哪种缓动函数。jQuery自身提供"linear" 和 "swing",可以不写 alert("hide()方法完成"); }); }); });
3、toggle() 方法
toggle() 方法来切换 hide() 和 show() 方法,(显示被隐藏的元素,并隐藏已显示的元素)
jq: //toggle() 方法来切换 hide() 和 show() 方法 $(function(){ $("show").click(function(){ $(".ex").toggle(); }); });