Каков наилучший способ показать и скрыть навигационные элементы с помощью слайдерной анимации?

Question

Хорошо, у меня есть фиксированная навигационная боковая панель, у меня есть три иконки. При нажатии на иконку div (скрытый с отрицательным полем) выскользнет. При повторном нажатии кнопки отображаемый элемент будет скрыт (с помощью анимации слайдов). Это действие будет повторено для двух других значков.

Я понимаю, что есть много разных способов выполнить это, и есть много подтверждающей документации с различными мнениями. Я попытался объявить действие через.click с.animate({"left": "+=56px"},"slow") и также написал функции для запуска onclick. Я понимаю, что могу легко сделать эту простую задачу гораздо более сложной, чем она должна быть.

Какие-нибудь предложения относительно самого чистого способа выполнить это?

Редактировать: Спасибо всем за их вклад. Переключение, хотя оно и минималистично по своей природе, не идет слева направо. Сценарий, который я в итоге использовал, был:

   <?// Toolbar ?>
   <div id="toolbar">

      <img src="images/balihooGreyLogo.png" class="logo"/>

      <a href="#" class="textIcon" title="Edit Copy"><img src="images/textIcon.png" border="0"/></a>

      <a href="#" class="locationIcon"><img src="images/locationIcon.png"  border="0"/></a>

      <a href="#" class="mediaIcon"><img src="images/mediaIcon.png"  border="0"/></a>

      <a href="#" class="save">SAVE</a>

      <a href="#" class="export">EXPORT</a>

   </div>




  <?// Text Input Slideout Box?>
   <div class="textInput">
      <h1>Email Copy</h1>

   </div>
<script>
 $('.textIcon').click(function () {
    $('.textInput').slideToggleWidth();
});

jQuery.fn.extend({
  slideRight: function() {
    return this.each(function() {
      $(this).animate({width: 'show'});
    });
  },
  slideLeft: function() {
    return this.each(function() {
      $(this).animate({width: 'hide'});
    });
  },
  slideToggleWidth: function() {
    return this.each(function() {
      var el = $(this);
      if (el.css('display') == 'none') {
        el.slideRight();
      } else {
        el.slideLeft();
      }
    });
  }
});
</script>

Answer 1

Это кажется самым простым способом сделать это. Я предполагаю, что вы скрываете их с отрицательным текстом по причинам доступности (в отличие от отображения: нет;). Единственное предложение, которое я мог бы сделать для очистки, если вы еще этого не делаете, это написать одну функцию, которая работает для всех кнопок.

$('.icon').click(function() {
       $(this).next('.nav-item').animate({"left":"+=56px"},"slow");
)};

Еще одна вещь, на которую вы, возможно, захотите взглянуть, - это некоторые достижения в скрытии элементов, которые вы хотите прочитать программами чтения с экрана, использует этот код: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility (Опять же, если предположить, что именно поэтому вы прячете это с отрицательным знаком)

.element-invisible {
  position: absolute !important;
  height: 1px; width: 1px; 
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

Вероятно, из-за ответа на вопрос, но подумал, что упомяну это.