jquery实现简单的手风琴效果

最近看到我看的教学视频有不少手风琴效果，我也试着写一下，当做练习。

明天我放假，就要去找工作，不知道，我的前端之路，能不能正式开始。

菜鸟起飞的机会都没有，那就尴尬了.

纯属练习：

效果如图：

html:

<ul class="wrap"><li class="checked"><span>选项1</span><div>1</div></li><li><span>选项2</span><div>2</div></li><li><span>选项3</span><div>3</div></li><li><span>选项4</span><div>4</div></li><li><span>选项5</span><div>5</div></li>
</ul>

css:

    ul,li,div,span{margin: 0;padding: 0;}li{list-style: none;}span{display: block;border-bottom:1px solid black;background-color: orange;}.wrap{width: 400px;height: 500px;border: 1px solid black;}.wrap li{width: 400px;height: 40px;overflow: hidden;}ul li.checked{height: 340px;}.wrap li span{height: 39px;line-height: 39px;text-indent: 20px;}.wrap li div{height: 300px;line-height: 300px;text-align: center;font-size: 50px;}

jquery:

  $(function(){$("ul li span").mouseover(function(){$(this).parent().animate({height:340},500);$(this).parent().siblings().animate({height:40},500);})})

转载于:https://www.cnblogs.com/lw1995/p/6666951.html

jquery实现简单的手风琴效果相关推荐

html5 jq点赞功能,jQuery实现简单的点赞效果
本文实例讲解了jQuery实现简单的点赞效果的详细代码,具体内容如下效果图: 下面提供一个"点赞"的实例代码,用ASP.NET MVC4+jQuery Ajax实现. Model ...
Jquery一个简单的点赞效果，实现点赞数+1
Jquery一个简单的点赞效果,实现点赞数+1 1.导入JS <script src="js/jquery-3.3.1.js" type="text/javascr ...
如何使用jQuery实现简单轮播效果
如何使用jQuery实现简单轮播效果如何使用jQuery实现简单的轮播效果,事例如下: 在Htlm中封装一个大盒子为cont(可以自行定义类名),其中放置2个类名分别为con(可以自行定义类名).h ...
jQ效果：简单的手风琴效果
实现效果如图所示: html结构: <div class="item_box box10"><div class="item_box_wp"& ...
用css来实现简单的手风琴效果
本文主要讲述的是用html+css来实现一个简单的手风琴案例,即可实现简单的展开/收起的功能效果图: HTML+CSS <!DOCTYPE html> <html lang=&qu ...
jQuery实现侧边导航手风琴效果
侧导航的手风琴效果是指,点击含子层导航的父导航时,使原本隐藏的子导航显示,再次点击,子层导航又恢复隐藏,同时,同一时间只有一个父导航的子导航能够显示 $("#sidenav > li& ...
使用jquery的accordion实现手风琴效果菜单树
jquery的accordion的使用非常简单,只需要给它一个固定格式的ul即可...好像是句废话... 那么如何实现呢?请看下面(小明同学别低头...) jquery-2.1.0.min.js sc ...
手风琴效果（jQuery）
简单的手风琴效果实现实际比看起来简单,只是改变当前的元素宽度和其他元素的宽度,其代码如下(图片什么的都要换成自己噢) <!DOCTYPE html> <html lang=" ...
Html 实现手风琴效果
html简单实现手风琴效果这是加载页面的效果这是鼠标悬停的效果鼠标悬停哪一张图片也会相对应的展开(下面是代码,图片自己找几张放上去,路劲修改成自己的就可以了) <!DOCTYPE html ...

jquery实现简单的手风琴效果

jquery实现简单的手风琴效果相关推荐

最新文章

热门文章