背景说明
有的时候我们需要这样一个效果,当鼠标悬浮在一个位置上时,这个悬浮事件会触发一个动画,jQuery实现的动画可以使得整体效果流程优美
代码示例
缺点:
- 未做截流,重复悬停会导致多次触发
- 只支持pc端
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>jQuery实现hover 时 DIV层的收缩展开效果-纵向</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
html, body {
height: 100%;
background-color: #eee;
margin: 0;
padding: 0;
}
.text {
line-height: 22px;
padding: 0 6px;
color: #666;
}
.box {
width: 750px;
max-width: 750px;
margin: 0 auto;
background: #fff;
box-sizing: border-box;
padding: 50px 20px;
height: 100%;
}
.box h1 {
padding-left: 10px;
height: 22px;
line-height: 22px;
/*line-heigt的属性值与height属性值设置成同一个值,实现文字垂直居中*/
font-weight: bold;
}
.box {
position: relative;
/*设置边框,突出显示隐藏层*/
border: 1px solid #e7e7e7;
}
</style>
</head>
<body>
<div class="box">
<a href="javascript:;" class="anker">鼠标请过来悬浮在此,默认展开, 当前<span id="status"></span></a>
<div class="text">
<p>这是一段隐藏的内容,默认是展开的,当悬浮上面的按钮,你会看见这里的内容或变换展开与收起的状态</p>
</div>
</div>
</div>
<script type="text/javascript">
function setStatus(status) {
document.getElementById('status').innerHTML = status;
}
// 收缩展开效果
$(document).ready(function () {
setStatus('展开');
// 注意!!! 此处代码未做截流,重复悬停会导致多次触发
$(".box .anker").hover(function () {
/*.animate()是jQuery的动画函数,在此,我们可以修改DOM元素的CSS样式,实现元素的动态改变*/
$(this).next(".text").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
setStatus('收起');
},
function () {
$(this).next(".text").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
setStatus('展开');
});
});
</script>
</body>
</html>
效果查看
可以直接复制代码在本地查看,也可以打开下面的网站查看
https://bunnymelody.github.io/pageview/htmls/jquery/hover_toggle_expand.html
示例截图