我使用jQuery .slideToggle()
创建了一个幻灯片幻灯片jQuery("#impressum").slideToggle();
jQuery(this).toggleClass("open");
// just a smooth slide down
var theOffset = jQuery("#impressum").offset();
jQuery('html, body').animate({
scrollTop: theOffset.top -150
}, 1000);
HTML dummy:
<div class="impressum-wrapper">
<div class="center">
<div class="impressum-button" id="drawers">
<h5 class="accordion">Impressum</h5>
<div class="show-impressum">
image with arrow down
</div>
</div>
</div>
</div>
<div id="impressum">
CONTENT
</div>
问题(在Chrome和Internet Explorer中(firefox工作正常)):
impressum位于页面底部。当印象深刻 再次折叠,动画运行并留下一个空格,动画后页面调整为新大小,视图会跳起来。
有没有办法避免空白? 替代方案:我可以让动画从上到下运行(目前从下到上)?
问候 罗布