您的位置：首页 > Web前端 > JQuery

jQuery中通过animate做一个简单的上下滑动的动画案例

2016-04-22 16:19 661 查看

先说一下案例的目的。鼠标移动过去时，做上下切换动作，鼠标离开上下切换动作消失。当然，不是简单的展示和关闭。看源代码：

<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)进行控制动画的显示。不然就会导致操作完后，动画效果还在继续。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery

相关文章推荐

新的分享

章节导航