幻灯片菜单转换

问题描述：

我在菜单中有一张左侧幻灯片。当我加载页面时，它会自动进行动画和“滑入”。我的转换速度在CSS中设置。问题在于通话功能（见下文）的转换非常不顺畅。如果我在.click之后添加速度（300），则完全不起作用。幻灯片菜单转换

的脚本是：

<script> 
    $(document).ready(function() { 
     $('#showLeft').click(); 
     });</script>

CSS过渡：

.cbp-spmenu { 
-webkit-transition: all 0.3s ease; 
-moz-transition: all 0.3s ease; 
transition: all 0.3s ease;

}

如果任何人有关于如何使幻灯片过渡平滑的任何意见或建议。我会非常感激。

的Javascript：

//slidemenu.js 
var menuLeft = document.getElementById('cbp-spmenu-s1'), 
      showLeft = document.getElementById('showLeft'), 
      body = document.body; 

     showLeft.onclick = function() { 
      classie.toggle(this, 'active'); 
      classie.toggle(menuLeft, 'cbp-spmenu-open'); 
      disableOther('showLeft'); 
     }; 
     function disableOther(button) { 
      if(button !== 'showLeft') { 
       classie.toggle(showLeft, 'disabled'); 
      } 
     }

HTML

<body class="cbp-spmenu-push"> 

<!-- Side Menu --> 

<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1"> 
    <button id="showLeft" class="menuOpen"><i class="icon-reorder icon-small"></i></button> 
    <div class="side-panel-top"><a href="index.html" id="logo"><img src="images/backgrounds/logo.png"></a></div> 
    <ul class="sidemenu"> 
     <li><a href="#">Twitter<i class="icon-chevron-right icon-small"></i></a> 
      <ul class="sidesub"> 
       <li><a href="#">Twitter</a></li> 
       <li><a href="#">Read</a></li> 
       <li><a href="#">Twitter</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Github<i class="icon-chevron-right icon-small"></i></a></li> 
     <li><a href="#">Facebook<i class="icon-chevron-right icon-small"></i></a></li> 
     <li><a href="#">Github<i class="icon-chevron-right icon-small"></i></a></li> 
     <li><a href="#">Facebook<i class="icon-chevron-right icon-small"></i></a></li> 
    </ul> 
</nav>

答

试试这个里面$(document).ready(function()

$("#id want to slide").animate({left:'-200px'});

或

$("#id u want to slide").css({left:'-200px'});

感谢您的回答。虽然不起作用。 –

相关推荐