先说一下案例的目的。鼠标移动过去时,做上下切换动作,鼠标离开上下切换动作消失。当然,不是简单的展示和关闭。看源代码:
<body>
<div id="main">
<ul>
<li>天空<div>1019</div></li>
<li>第三人称<div>1019</div> </li>
<li>马甲上的绳<div>1019</div></li>
<li>妥协<div>1019</div></li>
<li>马赛克<div>1019</div></li>
</ul>
</div>
</body>
样式要求:
@charset "utf-8";
/* CSS Document */
#main ul li {
width: 200px;
height: 200px;
list-style-type: none;
float: left;
border: solid 1px red;
margin-right:10px;
position: relative;
overflow:hidden;
}
ul li div {
height: 200px;
width: 200px;
position:absolute;
z-index:12233;
background-color:blue;
top:200px;
left:0px;
}
* {
margin: 0;
list-style-type: none;
padding: 0;
text-decoration: none;
}
@charset "utf-8";
/* CSS Document */
#main ul li {
width: 200px;
height: 200px;
list-style-type: none;
float: left;
border: solid 1px red;
margin-right:10px;
position: relative;
overflow:hidden;
}
ul li div {
height: 200px;
width: 200px;
position:absolute;
z-index:12233;
background-color:blue;
top:200px;
left:0px;
}
* {
margin: 0;
list-style-type: none;
padding: 0;
text-decoration: none;
}
最后写jQuery代码:
<script>
$(function(){
$("#main ul li").hover(
function(){
$(this).children().stop(true,true).animate(
{top:"200px"},300
)
},
function(){
$(this).children().stop(true,true).animate(
{top:"0px"},300
)
}
)
});
</script>
特别要注意加上:stop(true,true)进行控制动画的显示。不然就会导致操作完后,动画效果还在继续。