JQuery 修正动画延迟

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>通过stop()修正动画延迟</title><style type="text/css">body{font-family:'Microsoft Yahei';}body,ul{margin:0px;padding:0px;}ul{list-style:none;}.menu{width:200px;margin:20px auto 0;}.menu .level1,.menu li ul a{display:block;width:200px;height:30px;line-height:30px;text-decoration:none;background-color:#3366cc;color:#fff;font-size:16px;text-indent:10px;            }.menu .level1{border-bottom:1px solid #afc6f6;}.menu li ul a{font-size:14px;text-indent:20px;background-color:#7aa1ef;}.menu li ul li{border-bottom:1px solid #afc6f6;}.menu li ul{display:none;}.menu li ul.current{display:block;}.menu li ul li a:hover{background-color:#f6b544;}</style><script type="text/javascript" src="js/jquery-1.12.4.min.js"></script><script type="text/javascript">//创建层级菜单.   使用两级元素, 一级一直显示, 二级在点击的时候显示, 并且取消其他级别显示则可;
$(function(){$(".level1").click(function(){$(this).siblings().stop().slideToggle(300).parent().siblings().children("ul").slideUp(300);// 连续点击的时候,  记录次数,并且一次一次完成.// 在动画函数前面增加stop()语句, 能够在下次点击的时候终止前一次的动画, 避免冗余操作带来的不利观感.// 要加在 点击所产生的动画上面
})})</script>
</head>
<body><ul class="menu"><li><a href="#" class="level1">水果</a><ul class="current"><li><a href="#">苹果</a></li><li><a href="#">梨子</a></li><li><a href="#">葡萄</a></li><li><a href="#">火龙果</a></li></ul></li><li><a href="#" class="level1">海鲜</a><ul><li><a href="#">蛏子</a></li><li><a href="#">扇贝</a></li><li><a href="#">龙虾</a></li><li><a href="#">象拔蚌</a></li></ul></li><li><a href="#" class="level1">肉类</a><ul><li><a href="#">内蒙古羊肉</a></li><li><a href="#">进口牛肉</a></li><li><a href="#">野猪肉</a></li>                </ul></li><li><a href="#" class="level1">蔬菜</a><ul><li><a href="#">娃娃菜</a></li><li><a href="#">西红柿</a></li><li><a href="#">西芹</a></li><li><a href="#">胡萝卜</a></li></ul></li><li><a href="#" class="level1">速冻</a><ul><li><a href="#">冰淇淋</a></li><li><a href="#">湾仔码头</a></li><li><a href="#">海参</a></li><li><a href="#">牛肉丸</a></li></ul></li></ul>
</body>
</html>

转载于:https://www.cnblogs.com/jrri/p/11347584.html

JQuery 修正动画延迟相关推荐

jQuery动画（jQuery预制动画，jQuery自定义动画，jQuery停止动画和延迟动画）
目录 jQuery预制动画显示隐藏动画上拉下拉动画(高度动画) 淡入淡出动画(透明度动画) jQuery自定义动画 jQuery停止动画和延迟动画等 jQuery预制动画 jquery的预制动画 ...
jQuery 之 [ 动画 ]
jQuery动画分为预定义动画和自定义动画预定义动画显示和隐藏动画效果滑动式动画效果淡入和淡出动画效果显示和隐藏 show( )方法表示显示动画效果"括号中填写动画执行的时间 ...
动画延迟效果css,每个子元素都有延迟的CSS动画
每个子元素都有延迟的CSS动画我试图通过将动画应用于每个子元素来创建级联效果. 我想知道是否有比这更好的方法: .myClass img:nth-child(1){ -webkit-animatio ...
第一百七十二节，jQuery，动画效果
jQuery,动画效果学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性一．显示.隐藏 jQuery 中显示方法为:. ...
jQuery系列第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
【JQuery】动画
<button>按钮</button> <div></div> div {width: 100px;height: 100px;padding: 10p ...
js进阶 13-5 jquery队列动画如何实现
js进阶 13-5 jquery队列动画如何实现一.总结一句话总结:同一个jquery对象,直接写多个animate()就好. 1.什么是队列动画? 比如说先左再下,而不是左下一起走 2.怎么实现 ...
Lazy Line Painter – 很有趣的 jQuery 路径动画插件
Lazy Line Painter 是基于 Raphaël(一个用于在网页中绘制矢量图形的 Javascript 库)的 jQuery 路径动画插件,能够把线条图案转换为吸引眼球的路径动画模式. 您可 ...
放弃使用jQuery实现动画
在 Web开发的圈子里,开发者常常认为CSS动画是一种高性能web动画技术,如果想让网页加载的更快一些,就应该用纯CSS动画.其实这种观点是错误的, 很多开发者早就放弃了javascript的动画,迫 ...

JQuery 修正动画延迟

JQuery 修正动画延迟相关推荐

最新文章

热门文章