jquery - 如何使用 jquery 滑动打开的内容

Question

我的设计师递给我一个设计，但我不是 100% 确定如何使用 jquery 和 css 进行设计。我基本上是在尝试让用户向上“滑动”页脚以显示更多内容。

我的 html..

 <div id="footer">
     <div id="expandingFooter"> hidden content</div>
        content that is always visible
 </div>

我有一个可以点击的切换按钮

$('#expandingFooter').slideToggle();

这会将展开的页脚内容向下滑动打开，然后向上滑动关闭。我希望它向上滑动然后关闭。

谢谢

Answer 1

您可以利用 JQuery UI 1.6 的效果 (Effects Demo Page)。以下为我实现了预期的效果。

$('#toggleButton').bind('click', function(e) {
    $('#expandingFooter').toggle(
        'slide', 
        { easing: 'easeOutQuint', direction: 'down' }, 
        1000
    );
});

注意:您可能想要使用缓动参数来获得所需的平滑效果。

您需要同时拥有最新版本的 JQuery和 JQuery UI Slide Effect做这个。