Question

我正在尝试将链接下方的div设置为在链接点击上向上和向下滑动动画，但动画根本不是平滑的，在向上滑动它只是跳过最后的距离。这是代码：

HTML：

<div>
<a href="#" id="may2016" class="month_name"><h2>May 2016</h2></a>
                <div class="archive_links" style="display:none;">
                    <p>Hello, 30. May 2016. 17:33</p>
                    <p>New One, 22. May 2016. 11:14</p>
                    <p>Third, 17. May 2016. 04:30</p>
                </div>
</div>
<div>
            <a href="#" id="april2016" class="month_name"><h2>April 2016</h2></a>
                <div class="archive_links" style="display:none;">
                    <p>Hello, 30. May 2016. 17:33</p>
                    <p>New One, 22. May 2016. 11:14</p>
                    <p>Third, 17. May 2016. 04:30</p>
                </div>
</div>

CSS：

div.archive_links {
            background:rgba(255,255,255, .15);
            padding:5px;
        }

        a.month_name {
            text-decoration:none;
            color:white;
            transition:color .4s ease;
        }

        a.month_name:hover {
            color:#c7c7ee;
            transition:color .4s ease;
        }

JavaScript的：

$(document).ready(function() { 
        $("#may2016").on('click', function() {
            $(this).next(".archive_links").slideToggle(1000);  
        });

        $("#april2016").on('click', function() {
            $(this).next(".archive_links").slideToggle(1000);  
        });
    });

这是jsFiddle。有人可以帮忙吗？

Answer 1

我看得很清楚。唯一的细节是小小的跳跃＆＃34;在开始。发生这种情况是因为jQuery在目标中将p设置为display时会立即显示block的边距。您应该尝试删除边距或将p置于div内并改为为div设置动画。

jQuery - slideToggle动画不流畅

1 个答案: