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{
		 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