jQ效果（显示隐藏）

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{
		width: 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();
		});
	});

　　

转载于:https://www.cnblogs.com/1500418882qqcom/p/10006137.html