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

最新推荐文章于 2020-12-21 11:41:07 发布

这条路黑到底

最新推荐文章于 2020-12-21 11:41:07 发布

阅读量1w

点赞数 1

分类专栏： java 文章标签： jquery

本文链接：https://blog.csdn.net/chaplinlong/article/details/51221152

版权

java 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

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

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

这条路黑到底

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery中通过animate做一个简单的上下滑动的动画案例

先说一下案例的目的。鼠标移动过去时，做上下切换动作，鼠标离开上下切换动作消失。当然，不是简单的展示和关闭。看源代码：<body><div id="main"> <ul> <li>天空<div>1019</div></li> <li>第三人称<div>1019</div> </li> <li>马甲上的绳<div>1019</div></li> <li>妥协<div
复制链接

扫一扫

专栏目录