jQuery анимация горизонтально не вертикально

Question

У меня есть 2 тега с контентом, слева и справа. Когда вы нажимаете кнопку, мне нужно, чтобы левая панель исчезла. это просто и я делаю это:

$("#leftPanel").hide(800); 

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

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

Answer 1

Вам необходимо JQuery эффекты пользовательского интерфейса для этого

http://jqueryui.com/hide/

Попробуйте эффект скрыть слайд.

$("#leftPanel").hide("slide"); 

Answer 2

Вы должны смотреть на родной функции живого JQuery в:

// Slide closed and hide 
$('#element').animate({ 
    width: '0px' // no width 
}, 1000, function() { 
    $(this).hide(); 
}); 

// Show and slide back open 
$('#element').show().animate({ 
    width: '100px' // full width in pixels 
}, 1000); 

Answer 3

Метод hide может принять ослабление эффекта, его настройки и продолжительность.

Вы можете смешать их, чтобы иметь подобное графическое поведение, сдвинув в левом направлении

Docs: http://api.jquery.com/hide/

Код:

$("#hideme").click(function() { 
    $(".obj2").hide('slide', { direction: 'left' }, 800); 
}); 

$("#showme").click(function() { 
    $(".obj2").show('slide', '', 800); 
}); 

Демо: http://jsfiddle.net/IrvinDominin/veER4/