我正在尝试使链接下面的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
有人可以帮忙吗?

最佳答案

我觉得很好。唯一的细节是开头的小“跳跃”。发生这种情况的原因是,当jQuery在目标中将p设置为display时,会立即显示block的边距。您应该尝试删除页边距或将p放在div内并为div设置动画。

关于javascript - jQuery-slideToggle动画不流畅,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37174939/

10-09 15:12
查看更多