使用jquery cookie时水平动画隐藏的div

Question

我正在使用一种带有 bootstrap 3 和 jquery cookie 的新型 offcanvas 技术。我正在使用this HTML 模型和以下 CSS 和 jquery。

CSS

    body {
        padding-top: 50px;
        overflow: hidden;
    }

    #wrapper {
        min-height: 100%;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0px;
        left: 0;
        display: inline-block;
    }

    #main-wrapper {
        height: 100%;
        overflow-y: auto;
        padding: 50px 0 0px 0;
        transition: all .5s linear;
        -moz-transition: all .5s linear;
        -webkit-transition: all .5s linear;
        -o-transition: all .5s linear;
    }

    .no-transition {
        -webkit-transition: none !important;
        -moz-transition: none !important;
        -o-transition: none !important;
        -ms-transition: none !important;
        transition: none !important;
    }

    #main {
        position: relative;
        height: 100%;
        overflow-y: auto;
        padding: 0 15px;
    }

    #sidebar-wrapper {
        height: 100%;
        padding: 50px 0 0px 0;
        position: fixed;
        border-right: 1px solid gray;
    }

    #sidebar {
        position: relative;
        height: 100%;
        overflow-y: auto;
        padding: 10px 15px 0;
        overflow-x: hidden;
    }

    .page-header {
        margin-top: 10px;
    }

   /* Media conditions removed intentionally */

JQuery

    $(function () {
        var $menu = $('#sidebar-wrapper');
        var $content = $('#main-wrapper');
        if ($.cookie('offcanvas') == 'hide') {
            $content.addClass('no-transition');
            $menu.hide();
            $content.removeClass('col-md-10').addClass('col-md-12');
        }
        else if ($.cookie('offcanvas') == 'show') {
            $menu.show(500).animate({ left: 0 });
            //  $menu.show();
            $content.removeClass('no-transition');
            $content.removeClass('col-md-12').addClass('col-md-10');
        }
        $('.toggle-button').click(function () {
            $content.removeClass('no-transition');
            if ($menu.is(':visible') && $content.hasClass('col-md-10')) {
                // Slide out
                $menu.animate({
                    left: -($menu.outerWidth() + 10)
                }, function () {
                    $menu.hide(1000);
                });
                $content.removeClass('col-md-10').addClass('col-md-12');
                $.cookie('offcanvas', 'hide');
            }
            else {
                // Slide in
                $menu.show(500).animate({ left: 0 });
                $content.removeClass('col-md-12').addClass('col-md-10');
                $.cookie('offcanvas', 'show');
            }
        });
        $('.bs-tooltip').tooltip();
    });

请参阅fullscreen demo。点击 Cog 图标将显示和隐藏带有动画的 div，刷新页面将根据 cookie 保留可见或隐藏状态。

一切正常，但是，只需折叠左侧边栏，刷新页面，然后单击 cog，边栏不会从左侧动画。此外，如果页面刷新时 cookie 为 hide，则动画将应用于 col-md-10 类。

如何解决这些问题？

谢谢。

更新

这是带有固定解决方案的更新的小提琴和全屏演示。任何有兴趣的人都可以使用这个模型。

http://jsfiddle.net/ravimallya/Y7P7h/6/

http://fiddle.jshell.net/ravimallya/Y7P7h/6/show/

Answer 1

问题是当你刷新页面并且你的 cookie 'offcanvas' 值是 'hide' 时，你只是隐藏了侧边栏而不是设置它的 css 样式 'left' 值，所以 left 默认为 0。当您单击图标来切换侧边栏，您正在尝试为左 0 设置动画，这已经是它的值了。

要解决此问题，您还需要在 cookie 'offcanvas' 值为 'hide' 时为侧栏（即 $menu）设置 css 样式左侧值，如下所示：

...
if ($.cookie('offcanvas') == 'hide') {
    $content.addClass('no-transition');
    $menu.hide();
    $menu.css('left', -($menu.outerWidth() + 10));
    $content.removeClass('col-md-10').addClass('col-md-12');
}
...