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

来源：互联网发布：手机网络慢怎么办编辑：程序博客网时间：2024/05/22 12:23

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

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

0 0