在JQuery中,想要让一个元素隐藏起来,有很多种方法,同样,让一个隐藏的元素显示,也有对应的方法,调整里面的参数,就可以实现淡入淡出
①显示元素:前提条件是元素已被隐藏
方法:$("元素").show()
调用此方法可以显示被隐藏的元素,括号里面可以自定义显示的时间,可以是“slow”,“fast”,也可以是毫秒数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Title</title>
<link rel="stylesheet" href="">
<style>
div{
width: 200px;
height:200px;
background: #ff7112;
display: none;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<script>
$(function () {
var btn=$('button');
btn.click(function () {
$('div').show(1000)
})
})
</script>
</head>
<body>
<div></div>
<button>Show</button>
</body>
</html>
与此相同的显示方式还有:$(''selector").fadeIn() $("selector").slideUp()
②隐藏元素
I.$("selector").hide()
II. $("selector").slideDown()
III. $("selector").fadeOut()
以上方式均可以实现元素的显示和隐藏,只要改变方法里面的时间参数,就可以实现淡入淡出
其实JQuery为了方便编程人员,还提供了另外几种方法,可以一键实现元素的显示与隐藏,简单点来说就是元素是显示的,点击按钮可以隐藏,反之亦可,这样就不用写两个函数了
①$("selector").toggle("slow")
②$("selector").fadeToggle(1000)
③$("selector").slideToggle("fast")
标注:这三种方法可以让显示的元素隐藏,隐藏的元素显示,改变里面的参数值便可实现淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Title</title>
<link rel="stylesheet" href="">
<style>
div{
width: 200px;
height:200px;
background: #ff7112;
display: none;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.3/jquery.min.js"></script>
<script>
$(function () {
var btn=$('button');
btn.click(function () {
$('div').slideToggle("fast") //fast可以替换成“slow”,也可以换成毫秒数
})
})
</script>
</head>
<body>
<div></div>
<button>Show</button>
</body>
</html>