-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
小职
2021-08-19
来源 ：
阅读 1333
评论 0
摘要：本文主要介绍了web前端开发jQuery基础入门--利用jQuery极简代码完成选中部分高亮显示效果 ，通过具体的内容向大家展现，希望对大家前端开发jQuery的学习有所帮助。
本文主要介绍了web前端开发jQuery基础入门--利用jQuery极简代码完成选中部分高亮显示效果 ，通过具体的内容向大家展现，希望对大家前端开发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>
我是小职，记得找我
✅ 解锁高薪工作
✅ 免费获取基础课程·答疑解惑·职业测评
喜欢 | 2
不喜欢 | 2
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
ICP许可 沪B2-20190160
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
