300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > jquery实现简单的手风琴效果

jquery实现简单的手风琴效果

时间:2022-08-17 13:26:22

相关推荐

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);})})

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。