17、jQuery自定义动画的基本使用

Sian · 发表于 2016-2-21 14:21:25

[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(){
			// 卷帘动画
			$('button:eq(0)').click(function(){
				$('ul').slideToggle(300);
			});
			// 停止动画
			$('button:eq(1)').click(function(){
				$('ul').stop();
			});
			// 0.3秒卷帘弹出，延时1秒后再淡出
			$('button:eq(2)').click(function(){
				$('ul').slideDown(300).delay(1000).fadeOut(400);
			});	
			
			// animate(css样式)
			$('a').mouseover(function(){
				$(this).animate(
					{paddingLeft:'20px'}
				);
			}).mouseout(function(){
				$(this).animate(
					{paddingLeft:'0px'}
				);
			});
	    });
    </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] 17、jQuery自定义动画的基本使用

相关帖子