如何使用jquery滑动内容

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

我的HTML ..

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

我有一个onclick的切换按钮

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

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

谢谢

解决方法

您可以利用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的最新版本才能执行此操作.

原文地址：https://www.jb51.cc/jquery/175828.html