Javascript 使用leftt position设置动画不'；行不通

我的手机菜单还有一个问题。它应该是这样工作的：

（asp.net框架）

我尝试在jquery中为它编写逻辑，但它不能正常工作。 我想有滑入和滑出类服务，但它只显示和淡出div的效果。 在某些元素上，可以设置属性的动画，如左或右，但在具有类服务的元素上，它不起作用。他们都给了财产：相对的。所以这不是理由。实际上我没有动画效果，元素只显示和隐藏。在控制台中，完全不修改“左”属性。 我不知道为什么，因为在例如带有类菜单标题的元素上，一切都很好

我的错在哪里

HTML（简单版）

}

CSS

}

不幸的是，由于代码量很大，我无法添加代码片段

我的网站现在似乎是这样：

---

你能创建一个工作的JSFIDLE吗？不幸的是，有很多css代码，因为我使用现有的css代码，但我可以在一个小时内将我的全部代码发送到服务器上，并设置到我的测试页面的链接。我已经在测试服务器上提供了指向我的页面的链接。首先在

中添加

。然后包括所有需要的css和js文件。您的测试服务器缺少jquery-ui.min.css、animate.css、my.js、jquery-ui.min.js、jquery.js等。

<nav class="active">

                <div class="regular">
                    <ul class="open">
                        <li class="sub-menu ">
                            <div class="menu-item"> Produkty </div>
                            <div class="menu-header"> Produkty </div>
                            <ul class="innerTextMenu>
                                <li> <a class="menu-link" href="/produkty/okna-dachowe" target="">Okna dachowe</a> </li>
                                <li> <a class="menu-link" href="" target="">Okna do płaskiego dachu</a> </li>

                            </ul>
                        </li>
                        <li class="sub-menu ">
                            <div class="menu-item"> Nasze wsparcie </div>
                            <div class="menu-header"> Nasze wsparcie </div>
                            <ul class="innerTextMenu">
                                <li> <a class="menu-link" href="/dla-klienta/serwis" target="">Obsługa posprzedażowa</a> </li>
                                <li> <a class="menu-link" href="/dla-klienta/zanim-kupisz" target="">Obsługa przedsprzedażowa</a> </li>

                            </ul>
                        </li>
                    </ul>
                </div>
                <div class="service">
                    <ul class="level-1 service-menu">
                        <li class="sub-menu"> <a class="menu-link" href="http://www.veluxshop.pl" target="" onclick="dataLayer.push({'eventcategory': 'External links', 'eventaction': 'www.veluxshop.pl', 'eventlabel': 'undefined', 'event': 'eventga'});">Sklep z roletami</a> </li>
                        <li class="sub-menu"> <a class="menu-link" href="/dla-klienta/katalogi-i-broszury" target="">Znajdź katalog</a> </li>
                        <li class="sub-menu"> <a class="menu-link" href="http://prasa.velux.pl/" target="" onclick="dataLayer.push({'eventcategory': 'External links', 'eventaction': 'prasa.velux.pl', 'eventlabel': '/', 'event': 'eventga'});">Biuro prasowe</a> </li>
                    </ul>
                </div>
            </nav>

    jQuery.fn.clickToggle = function(a,b) {
    function cb(){ [b,a][this._tog^=1].call(this); }
    return this.on("click", cb);

    $(".sub-menu").clickToggle(function() {   
        $(this).addClass('active');
        $('.menu-item').animate({'left':'-100%'}, 'slow', 'linear');
        $('.menu-header').css('right' , '0%');
        $('.service').addClass('is-hidden');
        $('.service').animate({'left:':'-100%'}, 'slow' , 'linear');
    }, function() {
        $(this).removeClass('active');
        $('.menu-item').animate({'left':'0%'}, 'slow', 'linear');
        $('.menu-header').css('right' , '-100%');
        $('.service').removeClass('is-hidden');
        $('.service').animate({'left:':'0%'}, 'slow' , 'linear');
     });

.is-hidden {
display: none !important;
transition:0.5s;