鍍金池/ 問答/HTML/ jquery的animate讓兩個(gè)在一起的div很自然的滾動

jquery的animate讓兩個(gè)在一起的div很自然的滾動

題目描述

使用jquery的animate，讓兩個(gè)div疊在一起，點(diǎn)擊按鈕往上跑，可以看到它們的交界處滾動的非常不雅。圖片看不出來可以復(fù)制代碼到本地。。。
圖片描述

題目來源及自己的思路

相關(guān)代碼

// 請把代碼文本粘貼到下方（請勿用圖片代替代碼）

<!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>點(diǎn)擊</button>
</body>
<script type="text/javascript">
    $("button").click(function(){
        $(".son1").animate({top:-100},500);
        $(".son2").animate({top:-100},500);
    })
</script>

</html>

你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？

如何讓這兩個(gè)div很自然向上滾動呢，解決交界處的問題

回答
編輯回答
葬憶

第一，為什么不用parent去滾動，比兩個(gè)son自己滾動要好很多。第二：用transition會更合適，你可以試下有沒有自然點(diǎn)

<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>點(diǎn)擊</button>
    <script type="text/javascript">
        $("button").click(function(){
            $(".father").css({top:-100},500);
        })
    </script>
</body>
2017年1月26日 18:40