问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

jquery的animate让两个在一起的div很自然的滚动

头像
wuchen
    281426

    题目描述

    使用jquery的animate，让两个div叠在一起，点击按钮往上跑，可以看到它们的交界处滚动的非常不雅。图片看不出来可以复制代码到本地。。。
    图片描述

    题目来源及自己的思路

    相关代码

    // 请把代码文本粘贴到下方（请勿用图片代替代码）

    <!DOCTYPE html>
    <html>

    <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <style type="text/css">
        .father{
            
            margin-top: 200px;
            margin-bottom: 200px;
        }
        .son1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
        }
        .son2{
            width: 100px;
            height: 100px;
            background-color: green;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
    <button>点击</button>
</body>
<script type="text/javascript">
    $("button").click(function(){
        $(".son1").animate({top:-100},500);
        $(".son2").animate({top:-100},500);
    })
</script>

    </html>

    你期待的结果是什么？实际看到的错误信息又是什么？

    如何让这两个div很自然向上滚动呢，解决交界处的问题

    javascriptcss
    阅读 2k
    1 个回答
    得票最新
    头像
    桃子_Lisa
      1.1k119
      ✓ 已被采纳

      第一，为什么不用parent去滚动，比两个son自己滚动要好很多。第二：用transition会更合适，你可以试下有没有自然点

      <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <style type="text/css">
        .father{
            position: relative;
            margin-top: 200px;
            margin-bottom: 200px;
            transition: 0.5s top linear;
            top: 0;
        }
        .son1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .son2{
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
    <button>点击</button>
    <script type="text/javascript">
        $("button").click(function(){
            $(".father").css({top:-100},500);
        })
    </script>
</body>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题