Скрыть / Показать слева

Question

У меня есть этот код, с помощью которого я могу скрыть / показать. Я хочу, чтобы div скрылся, пока он двигается влево. Как я могу это сделать? Это то, что у меня FIDDLE

JavaScript

$(document).ready(function() {
    $("#button").toggle(function() {
        $(this).text('Show Content');
    }, function() {
        $(this).text('Hide Content');
    }).click(function(){
        $("#hidden_content").slideToggle("slow");
    });
});

HTML

<a href="#" id="button" class="button_style">Hide content</a>
<div id="hidden_content">Content</div>

Answer 1

Использование .animate() с width установлен в toggle,

jsFiddle Demo

$("#hidden_content").animate({width: 'toggle'}, "slow");

• PS - Обратите внимание, что я добавил настройки CSS, которые меняются #hidden_content дисплей для inline-block потому что ширина div по умолчанию (элемент блока) по умолчанию равна 100%, и анимация довольно странная.

---

Свойства и значения анимации

...

В дополнение к числовым значениям каждое свойство может принимать строки 'show', 'hide' и ' toggle '. Эти сочетания клавиш позволяют настраивать скрытие и показ анимаций, учитывающих тип отображения элемента. Чтобы использовать встроенное отслеживание состояния переключения jQuery, ключевое слово 'toggle' должно быть последовательно задано как значение анимируемого свойства.

Answer 2

Вы можете сделать это следующим образом:

$(document).ready(function() {
    $("#button").toggle(function() {
        $(this).text('Show Content');
        $("#hidden_content").animate({left: "-50px"}, 500);        
    }, function() {
        $(this).text('Hide Content');
        $("#hidden_content").animate({left: "0px"}, 500);
    })
});

Демо Фиддл

Answer 3

Вы можете использовать слайд-эффект jquery Ui. http://api.jqueryui.com/slide-effect/