我正在尝试使链接下面的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/