jQuery-slideToggle动画不平滑

jQuery - slideToggle animation not smooth

本文关键字：平滑 动画 jQuery-slideToggle      更新时间：2023-09-26

我试图让链接下面的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在目标中将display设置为block时，p的边距立即出现。您应该尝试删除边距，或者将p放在div中，并为div设置动画。

相关文章：