16、jQuery基本动画效果使用示例
<!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>
页:
[1]