将margin-left更改动画添加到父母的兄弟标签(JQUERY)

时间:2017-11-22 15:59:28

标签: javascript jquery animation

当点击按钮时,我需要在父母的兄弟标签上添加边距左侧更改动画,并且CSS不可能。

我尝试了JQuery动画方法并且没有工作

CSS:

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

HTML:

    <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>

   JS:

 $('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');
            }
        });

问题是改变类是否有效,所以边距改变但我需要动画和animate()方法不起作用。

0 个答案:

没有答案