jQuery实现元素的隐藏和显示

一、jQuery 效果-隐藏和显示

1.jQuery hide()和show()

$("#hide").click(function(){
//hide可带参数也可不带，表示指定时间后进行隐藏
	$("p").hide(1000);
})
$("#show").click(function(){
    $("p").show(1000);
})

//一个完整的实现隐藏的函数，
//第二个参数是一个字符串，表示过渡使用哪种缓动函数。(jQuery自身提供"linear"和"swing",其他可以使用相关的插件);
$(function(){
	$(".hidebtn").click(function(){
		$("div").hide(1000,"linear",function(){
			alert("隐藏成功");
		})
	})
})

2.jQuery toggle()

//该方法可以用来实现hode()和show()方法的切换。
$("button").click(function(){
    $("p").toggle();
});

二、淡入淡出效果

//元素的淡入  当元素处于hide()状态，或者直接使用了display:none方法实现了隐藏，这时候使用fadeIn方法可实现淡入效果
$("button").click(function(){
//下面的fadeIn方法参数值不一样，实现的淡入效果也不一样。
	$("#div1").fadeIn();
	$("#div2").fadeIn("slow");
	$("#div3").fadeIn(3000);
})

//元素的淡出 元素处于show()状态，没有隐藏的状态下，实现淡出效果
$("button").click(function(){
//同样是三种不同的参数就，实现的淡出效果不一样。
	$("#div1").fadeout();
	$("#div2").fadeout(1000);
	$("#div3").fadeout("fast");
})

//fade Toggle()方法 可以在fadeIn()与fadeout()方法之间进行切换
$("button").click(fucntion(){
	$("#div1").fadeToggle();
	$("#div2").fadeToggle(1000);
	$("#div3").fadeToggle("fast");
})

//fade To()方法  该方法实现渐变效果，有两个参数，第一个表示渐变的快慢，第二个表示渐变后的opcity值
$("button").click(fucntion(){
	$("#div1").fadeTo("slow",0.15);
	$("#div2").fadeTo("slow",0,4);
	$("#div3").fadeTo("fast",0,7);
})

三、滑动

//slideDown()向下滑动  该效果是在元素实现隐藏时，使用slideDown()方法可以使元素向下滑动显示
$("#filp").click(function(){
	$("#panel").slideDown();
})
//元素处于隐藏状态
<div id="panel" style="width:100px;height:100px;display:none;">hello world</div>

//slideUp()向上滑动  前提是元素处于非隐藏状态的时候，使用slideUp()方法可以使元素向上滑动实现隐藏
$("#flip").click(function(){
    	$("#panel").slideUp();
})
//元素不隐藏
<div id="panel" style="width:100px;height:100px;">hello world</div>

//slideToggle()可以在slideDown()和slideUp()方法之间转换
$("#flip").click(function(){
	$("#panel").slideToggle();
})