Javascript 向父级添加左边距更改动画'；s兄弟姐妹'；s子标记（JQUERY）

当点击按钮时，我需要在父母的兄弟姐妹的子标签上添加左边距变化的动画，这在CSS中是不可能的

我尝试了JQuery动画方法，但不起作用

CSS:

HTML:

问题是更改类正在工作，所以边距会更改，但我需要动画，并且animate（）方法不起作用

div.sideMenuBar{
        display:inline-block;
        width:80px;
        color:black;
    }
    div.sideMenuBar.hiddenBar{
        margin-left:-100px;
    }

    <header>
    <div class="barButton">
          <div class="bar1"></div>
          <div class="bar2"></div>
          <div class="bar3"></div>
    </div>
    <h1 class="Rubrik" > Tillgångar </h1> 
</header>
<div class="body">
    <div class="sideMenuBar hiddenBar">
            <ul>
                <li><a href="#" >SideBar1</a></li>
                <li><a href="#">SideBar2</a></li>
                <li><a href="#">SideBar3</a></li>
            </ul>
    </div>

 $('div.barButton').on('click',function(e){
            $(this).toggleClass('change');
            //$('div.sideMenuBar').slideToggle();
            $('div.sideMenuBar').toggleClass('hiddenBar');
            if($('div.sideMenuBar').hasClass('hiddenBar')){
                $('div.sideMenuBar').animate('margin-left',0);
            }else {
                $('div.sideMenuBar').animate('margin-left','-100px');
            }
        });