如何将“把手栏”添加到滑动 div答案

【问题标题】：How to add a "handle bar" to a sliding div如何将“把手栏”添加到滑动 div
【发布时间】：2011-01-03 16:15:21
【问题描述】：

我有一个小的启动页面，并有一个浏览器范围的 div，它充当包装器，并且在 #wrapper 内有一个 div，它附加到 $.click(); 事件以将包装器 div 滑出以查看浏览器-大小背景照片。我想实现一个小按钮/链接，在隐藏包装器 div 后，该按钮/链接将滑入右下角。

我知道它可能主要是 CSS，但我需要一些帮助。

提前感谢您的帮助！

PS：使用 jQuery 作为我的框架。

【问题讨论】：

标签： jquery css animation slide

【解决方案1】：

关键在#wrapper的动画回调中。我假设：

页面的全部内容都在#wrapper里面，并用它来计算内容的高度。
内容可能高于浏览器窗口。
您将不支持 IE6，因此可以使用position: fixed;。

CSS：

#toggler {
    position: fixed;
    width: 20px;
    height: 20px;
    left: 0;
    display: none;
    }

JS：

jQuery(document).ready(function() {
    var windowHeight = jQuery(window).height(),
        togglerHeight = jQuery('#toggler').height(),
        togglerTopPosition = windowHeight - togglerHeight;

    jQuery(#toggler).css('top', togglerTopPosition + 'px');

    jQuery('#wrapper').click(function() {
        // take care of hiding the #wrapper
        jQuery('#wrapper').animate({
            yourSettings, 
            yourDuration, 
            function() { jQuery(#toggler).show(); } // callback
        });
    });

    jQuery('#toggler').click(function() {
        jQuery(this).hide();
        jQuery('#wrapper').animate({...});
    });
});

您可以猜到，#toggler 是小按钮/链接。随意设置样式，并根据需要更改宽度和高度。

【讨论】：