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

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

<body>
<div id="main">
  <ul>
    <li>天空<div>1019div>li>
    <li>第三人称<div>1019div> li>
    <li>马甲上的绳<div>1019div>li>
    <li>妥协<div>1019div>li>
    <li>马赛克<div>1019div>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)进行控制动画的显示。不然就会导致操作完后,动画效果还在继续。

你可能感兴趣的:(java)