jQuery显示\隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery动画效果</title>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
// hide(speed,callback)隐藏;
// $('.btu').click(function(){
// $('.one').hide(500, function(){
// $('body').css('background','red')
// })
// })
// show(speed,callback)显示;
// $('.one').hide()
// $('.btu').click(function(){
// $('.one').show()
// })
//toggle(speed,callback)事件切换 显示被隐藏的元素，并隐藏已显示的元素;
// $('.one').hide()
// $('.btu').click(function(){
// $('.one').toggle()
// })
// hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数
// 语法:
// $(selector).hover(inFunction(){},outFunction(){})
$('p').hover(
function(){
$(this).css('background','pink')
},
function(){
$(this).css('background','#9EEA6A')
}
)
})
</script>
<style type="text/css">
*{margin:0;padding:0;}
.box{margin:20px auto;font-size:20px;color: #fff;width: 300px;}
.box p{height: 160px;width: 300px;background: #9EEA6A;text-align: center;line-height: 160px;position: relative;}
.box button{height: 40px;width: 300px;border:none;color: #fff;background: #437421;}
</style>
</head>
<body>
<div class="box">
<button class="btu">点击</button>
<p class="one">~ 我是p标签 ~</p>
</div>
</body>
</html>
