Перемещение слайдов Переход

У меня есть левый слайд в меню. Когда я загружаю страницу, она оживляет и автоматически переходит в режим слайдов. Мои скорости перехода задаются в CSS. Проблема в том, что функция вызова (см. Ниже) имеет очень негладкий переход. Если я добавлю скорость (300) после .click, она вообще не работает.Перемещение слайдов Переход

Сценарий:

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

CSS Transitions:

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

источник

2013-06-23 Ryan Wegner

Попробуйте внутри $(document).ready(function()

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

или

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

источник

2013-06-23 08:39:59 Hulk1991

Спасибо за ответ. Не работает. –

Перемещение слайдов Переход

ответ

Смежные вопросы