16、jQuery基本动画效果使用示例

Sian · 发表于 2016-2-21 12:33:55

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
    <style>
	    ul{
		    list-style: none;
		    margin: 0;
		    padding: 0;
		    width: 160px;
		    border: 1px solid #555;
		    background: #AAA;
	    }
	    li{
		    margin: 0;
		    padding:5px 0 5px 20px;
		    border-bottom: 1px solid green;
		    font-size: 15px;
		    font-weight: bold;
	    }
	    a{
		    color: white;
		    text-decoration: none;
		    padding-right: 50px;
		    white-space: nowrap;
	    }
	    .even{
		    background: #808080;
	    }
    </style>
    <script>
	    $(document).ready(function(){
		    // 偶数行li添加even类 
			$('li:even').addClass('even');
			/*
			// 显示
			$('button:eq(0)').click(function(){
				$('ul').show(300);
			});
			// 隐藏
			$('button:eq(1)').click(function(){
				$('ul').hide(300);
			});
			// 如果隐藏则显示，如果显示则隐藏
			$('button:eq(2)').click(function(){
				$('ul').toggle(300);
			});
			// 下拉
			$('button:eq(0)').click(function(){
				$('ul').slideDown(300);
			});
			// 上拉
			$('button:eq(1)').click(function(){
				$('ul').slideUp(300);
			});
			// 如果隐藏则下拉，如果显示则上拉
			$('button:eq(2)').click(function(){
				$('ul').slideToggle(300);
			});
			*/
			// 淡出
			$('button:eq(0)').click(function(){
				$('ul').fadeIn(300);
			});
			// 淡入
			$('button:eq(1)').click(function(){
				$('ul').fadeOut(300);
			});
			// 如果隐藏则淡出，如果显示则淡入
			$('button:eq(2)').click(function(){
				$('ul').fadeToggle(300);
			});	
			// 淡入到某透明度		
			$('button:eq(3)').click(function(){
				$('ul').fadeTo(300, 0.3);
			});
	    });
    </script>
</head>
<body>
	<button>one</button><button>two</button><button>three</button><button>Four</button>
	<ul>
		<li><a href="">PHP 资讯</a></li>
		<li><a href="">iOS 资讯</a></li>
		<li><a href="">Android 资讯</a></li>
		<li><a href="">jQuery 资讯</a></li>
		<li><a href="">JavaScript 资讯</a></li>
	</ul>
</body>
</html>

帐号		自动登录	找回密码
密码			立即注册

[jQuery] 16、jQuery基本动画效果使用示例

相关帖子