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

时间：2022-12-01 21:01:40

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

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

标签：

相关文章