当我们在制作一个网页时,常常会有想要选中部分高亮的需求,那么怎么用jQuery的极简代码完成这件事呢?
可以看到,三个图片中,当我们的鼠标移到哪个上面,哪个就从中脱颖而出,其实这只需要一段非常简单的代码即可完成
$(function() {
//设置鼠标进入的时候,其他的li标签透明度:0.5
$(".wrap li").hover(function() {
$(this).siblings().stop().fadeTo(400, 0.5);
}, function() {
// 设置鼠标离开,其他li 透明度改为 1
$(this).siblings().stop().fadeTo(400, 1);
})
上段代码中的hover在上一篇文章中已经提到过,siblings也在之前的文章中提到过,这里就不过多阐述,这里我们主要注意一下stop()的用法
stop()即停止排队效果,且必须写到动画的前面
什么意思呢?让我们来看一段没有stop()的动画效果
可以看到,当我们快速多次经过图片后,即使鼠标已经移开,但是依然在执行操作,如果有个熊孩子一直这样划,或者我们在操作过程中出现失误,就会给浏览器加载带来过多的负担,所以stop()的作用就非常关键了
stop()会停止上一个动作,只做最后一个动作
说了这么多,我们把高亮显示和stop()代码放到整体代码中,大家感受一下这两个代码的用法
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Wellfancy</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
background: #000;
}
.wrap {
margin: 100px auto 0;
width: 278px;
height: 490px;
padding: 1px;
background: white;
overflow: hidden;
border: 1px solid #ffffff;
}
.wrap li {
float: left;
margin: 3px 2px;
}
.wrap img {
display: block;
border: 0;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(function() {
$(".wrap li").hover(function() {
$(this).siblings().stop().fadeTo(400, 0.5);
}, function() {
$(this).siblings().stop().fadeTo(400, 1);
})
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="#"><img src="images/4.jpg" style="height: 160px ;" /></a>
</li>
<li>
<a href="#"><img src="images/5.jpg" style="height: 160px ;"/></a>
</li>
<li>
<a href="#"><img src="images/6.jpg" style="height: 160px ;"/></a>
</li>
</ul>
</div>
</body>
</html>