Jquery 下拉动画效果

最新推荐文章于 2020-12-25 19:48:40 发布

gxrmbi

最新推荐文章于 2020-12-25 19:48:40 发布

阅读量740

点赞数

分类专栏： Jquery技巧文章标签： jquery 代码菜单下拉动画效果

本文链接：https://blog.csdn.net/gxrmbi/article/details/18658129

版权

Jquery技巧专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉动画效果</title>
<style type="text/css">
.art_nav{background:#000; color:#fff;}
.art_nav a{margin:0 20px;}
#drop_nav{display:none; background:#C00; color:#fff;}
</style>
<script src="jquery-1.7.2.min.js"></script>
 <script type="text/javascript">  
            $(function()  
            {  
			var timer=[];
	jQuery(".art_navmore").mouseover(function(){
		if(!jQuery(this).hasClass("hover")){
			jQuery(this).addClass("hover"); jQuery(this).find("#drop_nav").stop(true,true).slideDown(230);
		}
		window.clearTimeout(timer[0]);
	}).mouseleave(function(){
		if(jQuery(this).hasClass("hover")){
			var _this=this;
			timer[0]=window.setTimeout(function(){
			jQuery(_this).removeClass("hover");jQuery(_this).find("#drop_nav").stop(true,true).slideUp(150);
			},300);
	}
});
			});
</script>
</head>
<body>
<div class="art_nav"><a href="">111</a><a href="">222</a><span class="art_navmore"><a href="">333</a><div id="drop_nav">sadasdsadasdasd</div></span></div>
</body>
</html>

可应用于菜单列表的更多弹出层。

gxrmbi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery 下拉动画效果

下拉动画效果.art_nav{background:#000; color:#fff;}.art_nav a{margin:0 20px;}#drop_nav{display:none; background:#C00; color:#fff;} $(function() { var timer=[]; jQuer
复制链接

扫一扫