🙋 哈喽大家好，本次是jQuery案例练习系列第五期
⭐本期是jQuery案例——手风琴
🏆系列专栏：jQuery笔记
😄笔者还是前端的菜鸟，还请大家多多指教呀~
👍欢迎大佬指正，一起学习，一起加油！
文章目录
案例展示
哈喽大家好，本次案例将会实现一个简单的手风琴效果，当鼠标指针滑过方块时，当前方块状态会发生变化👇
手风琴案例
案例分析
手风琴效果的实现并不复杂，需要用到jQuery中的
fadeIn()
和
fadeOut()
方法，以及鼠标指针进入事件
mouseenter
，下面我们来对本次案例的实现思路进行分析👇
1、编写手风琴效果的页面结构。案例包含小方块、大方块和滑动的效果，所以我们需要设置小方块的大小和变成大方块后的大小等。
2、为不同的方块设置不同的背景颜色。为了美观和更好的展示效果，大方块的背景颜色采用了接近于小方块的背景颜色。
3、通过jQuery实现交互效果。当鼠标指针移动到小方块时，触发鼠标指针移入事件。利用选择器获取到页面中的小方块时，通过fadeIn()和fadeOut()方法控制方块的显示与隐藏。
案例实现
HTML
页面结构主要使用div、ul、li标签。
思路：
1、设置一个
div
，类名为
king
，用于存放方块。
2、设置方块结构，使用
ul
定义无序列表结构，使用
li
代表小方块结构。
li
的类名为
current
，表示初始状态。
3、在li标签内部定义两个
div
元素，类名分别为
big
和
small
。
big
表示大方块，
small
表示小方块。
4、通过颜色类名
red1
和
red2
等方式设置大小方块的颜色。
<body><divclass="king"><ul><liclass="current"><divclass="small red1"></div><divclass="big red2"></div></li><liclass="current"><divclass="small orange1"></div><divclass="big orange2"></div></li><liclass="current"><divclass="small yellow1"></div><divclass="big yellow2"></div></li><liclass="current"><divclass="small green1"></div><divclass="big green2"></div></li><liclass="current"><divclass="small ching1"></div><divclass="big ching2"></div></li><liclass="current"><divclass="small blue1"></div><divclass="big blue2"></div></li><liclass="current"><divclass="small purple1"></div><divclass="big purple2"></div></li></ul></div></body>
CSS
思路：
1、清除元素的默认样式。有些标签会带有默认样式，清除样式也方便我们后续设置css样式。
2、设置最外层盒子的样式。最外层盒子也就是类名为king的元素，设置它的大小，背景颜色，边距，使其居中显示，隐藏超出盒子的部分。
3、设置大小方块的背景色。
4、取消列表ul的默认样式。
5、设置列表的样式，设置列表的大小，边距等。这里使用
position：relative
设置相对定位。
position：relative
是基于该元素本身原来的位置来定位，当它进行位置移动时，它还是占用着原来的位置。
6、设置初始状态。
7、设置大方块样式，使用
display：none；
隐藏方块，设置大方块的大小，圆角边框。
8、设置小方块的样式，设置小方块的大小、边距、圆角边框。使用
position：absolute；
使元素脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位时，会当作脱离文档流的元素不存在而进行定位。
<style>/* 清除元素的margin和padding */*{margin: 0;padding: 0;}/* 设置最外层盒子的样式 */.king{width: 710px;margin: 100px auto;background:rgb(187, 183, 183);/* 超出盒子部分隐藏 */overflow: hidden;padding: 10px;}/* 取消列表的默认样式 */.king ul{list-style: none;}/* 设置列表样式 */.king li{position: relative;width: 69px;height: 69px;margin-right: 5px;margin-left: 5px;}/* 设置初始状态 */.king li.current{width: 110px;float: left;}.king li.small{display: none;}.king li.big{display: block;}/* 设置大方块样式 */.big{width: 224px;height: 69px;display: none;border-radius: 5px;}/* 设置小方块样式 */.small{position: absolute;top: 0;left: 0;width: 69px;height: 69px;border-radius: 5px;}/* 设置大小方块背景色 */.red1{background-color: red;}.red2{background-color:rgb(248, 97, 97);}.orange1{background-color: orange;}.orange2{background-color:rgb(250, 202, 113);}.yellow1{background-color: yellow;}.yellow2{background-color:rgb(248, 248, 103);}.green1{background-color: green;}.green2{background-color:rgb(21, 209, 21);}.ching1{background-color: greenyellow;}.ching2{background-color:rgb(198, 250, 120);}.blue1{background-color: blue;}.blue2{background-color:rgb(154, 154, 242);}.purple1{background-color: purple;}.purple2{background-color:rgb(218, 17, 218);}</style>
jQuery
jQuery部分有两种方法，一起看看吧~
首先，最重要的一步是引入jQuery👇
方法一
思路：
1、获取类名为king元素下的li，并且绑定鼠标指针移入事件。
2、找到当前元素，调用stop()用来停止当前正在进行的动画，通过调用animate()方法，让宽度过渡到224px。
3、找到小方块，实现淡出效果。
4、获取小方块的兄弟元素，类名为big的大方块，实现淡入效果。
5、清除当前元素的其他兄弟元素，大方块变小方块。
6、实现小方块淡入效果。
7、实现大方块淡出效果。
<script>$(document).ready(function(){// 1、获取king元素下的li，绑定鼠标指针移入事件$(".king li").mouseenter(function(){// 2、找到当前元素，停止当前正在进行的动画，使宽度过渡到224pxvar interim =$(this).stop().animate({width:224,});// 3、找到小方块，实现淡出效果var fade_square1= interim.find(".small").stop().fadeOut();// 4、获取小方块的兄弟元素，实现淡入效果
fade_square1.siblings(".big").stop().fadeIn();// 5、清除当前元素的其他兄弟元素的状态，大方块变小方块var interim2 =$(this).siblings("li").stop().animate({width:69,});// 6、小方块淡入var fade_square2=interim2.find(".small").stop().fadeIn();// 7、兄弟节点，大方块淡出
fade_square2.siblings(".big").stop().fadeOut();});});</script>
方法二
方法二是使用链式编程来达到效果，整体思路和方法一类似，就不多赘述啦~
<script>$(document).ready(function(){$(".king li").mouseenter(function(){$(this).stop().animate({width:224}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();$(this).siblings("li").stop().animate({width:69}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();});});</script>
总结
以上就是今天的学习内容啦~
如果有兴趣的话可以订阅专栏，持续更新呢~
咱们下期再见~
版权归原作者 颜颜yan_ 所有， 如有侵权，请联系我们删除。