17、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(){
// 卷帘动画
$('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>
页:
[1]