前言

? ? ? ?花季少女和小米官网你选哪个？只有小孩子才做选择，你当然都会拥有！我们今天就看看花季美少女是怎么用jQuery写小米官网的，看看女孩子的思维和男孩子有什么不一样！css的东西我这里就不多说啦，时间紧任务重！主要是给大家讲解一下怎么实现一个高度变化的效果呢~

?效果展示

? ??家人们，这里一整个效果就是高度变换和鼠标的位置变换带来的效果。?我围绕这两点详细讲解~

高度变换 概述

? ? 这里的高度变换讲解就是，当我们鼠标移动进入区域的时候会显示出对应的板块，但是这里最后两个是没有对应板块的，所以需要鼠标进入的时候板块收回。

?讲解 鼠标移动到这个位置的时候就将高度变为0，加上过渡效果（transition: all 0.3s）以及overflow：hidden，就可以实现这个丝滑的变换效果。这里需要控制鼠标的位置，不是鼠标离开就消失，而是鼠标是可以进入出现的板块的。从而得知，高度变为0的条件是：鼠标不在出现区域以及不在进入位置区域。需要注意的是，这里最后两个li的位置鼠标移动上去时，是需要马上消失的也是高度变为0的一个条件。 代码 css代码（是需要主要特别设置的地方） 需要出现的板块{ overflow: hidden;//防止高度消失其他内容在外面 transition: all 0.3s;//添加过渡效果才能实现“丝滑” // 隐藏本来的高度设置为0 // height: 215px; height: 0px; } jQuery代码 var dowload = $('#download');//鼠标移动到这里QR_codes出现 var QR_codes = $('.QR_codes'); var flag3 = true;//判断鼠标是否离开dowload var flag4 = true;//判断鼠标是否离开QR_codes dowload.hover(function () { flag3 = false; QR_codes.css("height", "215px");//鼠标进入QR_codes出现 }, function () { flag3 = true; }); QR_codes.hover(function () { flag4 = false; }, function () { flag4 = true; }); setInterval(function () { if (flag3 && flag4) { QR_codes.css("height", "0px");//鼠标不在QR_codes和dowload区域 板块消失 } }, 15); 总结

? ? ? 我这里做的是在“高度”上动手脚，我们也可以用slideup和slidedown。因为我这个代码是js改版的，老师让我们改为jQuery，所以没有在逻辑上做改变。我觉得用slideup和slidedown应该也挺简单的（我当时还没学 呜呜呜~），多了解一种方法也是极好的呢！毕竟技多不压身啦 ~

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。