mouseenter和mouseleave事件实现滑动
<style>
.dj,
.xihua {
width: 600px;
height: 60px;
margin: 0 auto;
background-color: rgba(247, 250, 65, 0.212);
text-align: center;
padding: 5px;
border: 1px solid rgb(107, 107, 107);
line-height: 60px;
}
.xihua {
height: 200px;
line-height: 200px;
display: none;
}
</style>
<body>
<div class="dj" id="x">点击该元素下滑 </div>
<div class="xihua" id="xi">元素显示完毕</div>
<script>
$(function() {
$("#x").mouseenter(function() {
$('#xi').slideDown(1000)
})
$("#x").mouseleave(function() {
$('#xi').slideUp(1000)
})
})
</script>
</body>
hover事件实现滑动
<style>
.dj,
.xihua {
width: 600px;
height: 60px;
margin: 0 auto;
background-color: rgba(247, 250, 65, 0.212);
text-align: center;
padding: 5px;
border: 1px solid rgb(107, 107, 107);
line-height: 60px;
}
.xihua {
height: 200px;
line-height: 200px;
display: none;
}
</style>
<body>
<div class="dj" id="x">点击该元素下滑 </div>
<div class="xihua" id="xi">元素显示完毕</div>
<script>
$(function() {
$("#x").hover(function() {
$('#xi').slideDown(1000);
}, function() {
$('#xi').slideUp(1000)
})
})
</script>
</body>
或者
<style>
.dj,
.xihua {
width: 600px;
height: 60px;
margin: 0 auto;
background-color: rgba(247, 250, 65, 0.212);
text-align: center;
padding: 5px;
border: 1px solid rgb(107, 107, 107);
line-height: 60px;
}
.xihua {
height: 200px;
line-height: 200px;
display: none;
}
</style>
<body>
<div class="dj" id="x">点击该元素下滑 </div>
<div class="xihua" id="xi">元素显示完毕</div>
<script>
$(function() {
$("#x").hover(function() {
$('#xi').slideToggle(1000)
})
})
</script>
</body>