前端基础 -JQuery之 相关效果
JQuery相关效果[*] 显示和隐藏：
show([毫秒值]) 显示
hide([毫秒值]) 隐藏
taggle([毫秒值]) 切换
[*] 滑入和滑出：
slidedown([毫秒值]) 滑入
slideup([毫秒值]) 滑出
slideToggle([毫秒值]) 切换
[*] 淡出和淡出：
fadeIn([毫秒值]) 淡入
fadeOut([毫秒值]) 淡出
fadeToggle([毫秒值]) 切换
fadeTo()
案例：
效果图：
代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
border:1px solid #000;
width:100px;
height:100px;
}
</style>
<!-- 导入js库 ，注意：使用src属性之后，标签体中不能写入内容-->
<script src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//显示和隐藏
$("#b1").click(function(){
//$("#b1Div").hide(2000);
$("#b1Div").toggle(2000);
})
//滑入和滑出
$("#b2").click(function(){
//$("#b2Div").slideUp(2000);
$("#b2Div").slideToggle(2000);
})
//淡入和淡出
$("#b3").click(function(){
//$("#b3Div").fadeOut(2000);
//$("#b3Div").fadeToggle(2000);
$("#b3Div").fadeTo(1000,0.5,function(){
alert("淡化完成");
})
})
});
</script>
</head>
<body>
<input type="button" id="b1" value="显示/隐藏 b1Div" />
<div id="b1Div"></div> <br/>
<input type="button" id="b2" value="滑出/滑入b2Div"/>
<div id="b2Div"></div> <br/>
<input type="button" id="b3" value="淡出/淡入b3Div" />
<div id="b3Div"></div>
</body>
</html>
文档来源：51CTO技术博客https://blog.51cto.com/u_15294985/2999139
页:
[1]