利用jQuery极简代码完成选中部分高亮显示效果
Posted Wellfancy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用jQuery极简代码完成选中部分高亮显示效果相关的知识，希望对你有一定的参考价值。
当我们在制作一个网页时，常常会有想要选中部分高亮的需求，那么怎么用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>
以上是关于利用jQuery极简代码完成选中部分高亮显示效果的主要内容，如果未能解决你的问题，请参考以下文章