jQuery slideDownUp动画效果_$('ul.menu').fadetoggle("slow");-优快云博客

本文介绍了一种使用CSS进行样式设定并结合jQuery实现下拉菜单动态效果的方法。通过隐藏默认列表样式并设置特定的CSS样式，使菜单外观更加美观。利用jQuery的show和hide方法或者slideToggle等动画效果，实现了菜单项的展开与收起功能。

<style type="text/css">
			*{
				margin: 0;padding: 0;
				list-style: none;
			}
		</style>
	</head>
	<body>
		<ul id="menu">
			<li>
				<div>title_1</div>
				<ul class="ul_menu">
					<li>12</li>
					<li>12</li>
				</ul>
			</li>
			<li>
				<div>title_2</div>
				<ul class="ul_menu">
					<li>12</li>
					<li>12</li>
				</ul>
			</li>
			<li>
				<div>title_3</div>
				<ul class="ul_menu">
					<li>12</li>
					<li>12</li>
				</ul>
			</li>
		</ul>
		<div id="box" style="width: 100px; height: 100px; background: red;"></div>
	</body>
	<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
	<script>
		$('.ul_menu').css('display','none');
		/*var idClose = true;
		$('div').on('click',function(){
			if(idClose){
				$($(this).siblings()[0]).slideDown('slow',function(){
				});
				idClose = false;
			}else{
				$($(this).siblings()[0]).slideUp('slow',function(){
				});				
				idClose = true;
			}
		});*/
		
		// 滑入/滑出
		/*$('div').on('click',function(){
			$($(this).siblings()[0]).slideToggle('slow',function(){});
		});*/
		
		/*淡入/淡出 改变透明度
		 * fadeIn() 	淡入
		 * fadeOut()	淡出
		 * fadeToggle()	淡入/淡出
		 */
		/*$('div').on('click',function(){
			$($(this).siblings()[0]).fadeToggle('slow',function(){});
		});*/
		
		// fadeTo(时间,透明度)修改标签的透明度
		/*$('#box').on('mouseover',function(){
			$(this).fadeTo(400,0.5);
		});*/
	</script>