JQuery переключения слайдов не скользит правильно только в первый раз

Question

Thats мой codepen: http://codepen.io/helloworld/pen/pvPzLa

При нажатии кнопки влево/вправо шеврона, чтобы скользить DIV не скользит вправо а справа налево первый раз.

Я знаю, что причина в том, что я установил свойство видимости для скрытия/срыва изначально.

И когда пользователь нажимает кнопку слайда, я удаляю атрибут видимости из div, который нужно сдвинуть.

Как я могу исправить неправильное поведение?

HTML

<div id="availableOptionsSidebar" style="background-color:pink;" class="col-lg-1"> 
     <div id="availableOptionSidebarContainer" style="text-align:center;display: table;z-index:100000;background-color:orange;"> 
      <span id="availableOptionSidebarContainerOpener" style="cursor:pointer;font-size:2em;display:table-cell;vertical-align:middle;" class="glyphicon glyphicon-chevron-left"></span> 
      <div style="position:relative;height:100%;"> 
       <div id="availableOptionsContainer" style="position:absolute;height:100%;width:180px;border:black solid 1px;background-color:red;"> 
        <div> 
         <span style="cursor:pointer;font-size:2em;display:table-cell;vertical-align:middle;" class="glyphicon glyphicon-chevron-left"></span> 
         <span style="cursor:pointer;font-size:2em;display:table-cell;vertical-align:middle;" class="glyphicon glyphicon-chevron-right"></span> 
        </div> 
        <div> 
         <div class="row"> 
          <div>1</div> 
          <div>2</div> 
          <div>3</div> 
         </div> 
         <div class="row"> 
          <div>1</div> 
          <div>2</div> 
          <div>3</div> 
         </div> 
         <div class="row"> 
          <div>1</div> 
          <div>2</div> 
          <div>3</div> 
         </div> 
        </div> 

       </div> 
      </div> 
     </div> 
</div> 

JAVASCRIPT

$(function() { 

     $('#parameterContainer').height(400); 
     $('#availableOptionSidebarContainer').height(400); 
     $('#availableOptionsContainer').css('visibility', 'hidden'); 

     $('#availableOptionSidebarContainer').click(function() { 

     $('#availableOptionsContainer').css('visibility', ""); 


      if ($("#availableOptionSidebarContainerOpener").is(".glyphicon-chevron-left")) { // sidebar is closed 
       $("#availableOptionSidebarContainerOpener").removeClass("glyphicon-chevron-left"); 
       $("#availableOptionSidebarContainerOpener").addClass("glyphicon-chevron-right"); 

      } 
      else { // sidebar is openend 
       $("#availableOptionSidebarContainerOpener").removeClass("glyphicon-chevron-right"); 
       $("#availableOptionSidebarContainerOpener").addClass("glyphicon-chevron-left"); 

      } 


      // Set the effect type 
      var effect = 'slide'; 

      // Set the options for the effect type chosen 
      var options = { direction: 'left' }; 

      // Set the duration (default: 400 milliseconds) 
      var duration = 500; 

      $('#availableOptionsContainer').toggle(effect, options, duration); 

     }); 
    }); 

Answer 1

Возможно, вы хотите установить display: none вместо visibility свойство #availableOptionsContainer.

---

FYI: с JQuery вы можете toggle multiple classes. Вместо этого беспорядка с вашего демо

if ($("#availableOptionSidebarContainerOpener").is(".glyphicon-chevron-left")) { 
    // sidebar is closed 
    $("#availableOptionSidebarContainerOpener").removeClass("glyphicon-chevron-left"); 
    $("#availableOptionSidebarContainerOpener").addClass("glyphicon-chevron-right"); 
    $("#availableOptionSidebarContainerOpener").removeClass("rotateIn"); 
    $("#availableOptionSidebarContainerOpener").addClass("rotateOut"); 
} 
else { 
    // sidebar is openend 
    $("#availableOptionSidebarContainerOpener").removeClass("glyphicon-chevron-right"); 
    $("#availableOptionSidebarContainerOpener").addClass("glyphicon-chevron-left"); 
    $("#availableOptionSidebarContainerOpener").addClass("rotateIn"); 
    $("#availableOptionSidebarContainerOpener").removeClass("rotateOut"); 
} 

вы можете просто сделать

$("#availableOptionSidebarContainerOpener").toggleClass("glyphicon-chevron-right glyphicon-chevron-left rotateIn rotateOut"); 

и не забудьте установить начальный rotateIn класс в вашем HTML.