如何使用jquery滑动内容

Question

我的设计师递给我一个设计我不是100%确定如何处理jquery和css.我基本上试图让用户"滑动"页脚以显示更多的内容.

我的HTML ..

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

我有一个onclick的切换按钮

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

这会将展开的页脚内容向下滑动,然后向上滑动以关闭.我希望它向上滑动然后关闭.

谢谢

Answer 1

您可以利用JQuery UI 1.6的效果(效果演示页面).以下为我完成了预期的效果.

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

注意:您可能希望使用缓动参数来获得所需的效果平滑度.

您需要拥有JQuery和JQuery UI Slide Effect的最新版本才能执行此操作.