<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div {
border: 1px solid #000;
padding: 5px;
margin: 2px;
width: 100px;
position: absolute;
display: none;
background-color: white;
}
body {
border: 2px dashed;
}
img {
position: absolute;
}
</style>
<title></title>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btnHid").click(function () {
// $("ul").hide(1000);//设置动画的执行时间 内置fast=200 normal=400 slow=600
//2.设置回调函数
//$("ul").hide(1000, function () {
// $(this).show(3000);
//});
//3递归
showHide();
});
});
var times = 0;
//用递归实现掩藏 显示
function showHide()
{
if (times < 3)
{
$("ul").toggle(3000, showHide);
times++;
}
}
</script>
</head>
<body>
<input type="button" value="测试" id="btnHid" />
<ul>
<li content="广州小蛮腰1">广州小蛮腰1</li>
<li content="广州小蛮腰2">广州小蛮腰2</li>
<li content="广州小蛮腰3">广州小蛮腰3</li>
<li content="广州小蛮腰4">广州小蛮腰4</li>
<li content="广州小蛮腰5">广州小蛮腰5</li>
</ul>
</body>
</html>
4基本动画
时间： 2024-07-30 06:02:07