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

我在Bootstrap3和jQueryCookie中使用了一种新型的非画布技术。我正在使用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();
    });

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

一切都正常，但是，只要折叠左侧边栏，刷新页面，然后单击中心距，边栏将不会从左侧动画。此外，如果页面刷新时cookie是

hide

，则动画将应用于

col-md-10

类

如何解决这些问题

谢谢

更新

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

---

问题在于，当您刷新页面时，cookie的“offcanvas”值为“hide”，您只是隐藏侧栏，但没有设置其css样式的“left”值，因此left默认为0。当您单击图标切换侧栏时，您正在尝试设置左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');
}
...

---

是的，谢谢。它正在按预期工作。非常感谢。顺便说一句，如何同步动画？我的意思是显示/隐藏和替换类方法应该立即应用。。现在，它根本不同步。