jquery slide - slideToggle

Question

im работает на моем фиксированном footer на моей странице
У меня есть три DIV. Первый, который находится слева, содержит некоторые элементы, а другой DIV, который находится справа, является относительным div. Между этими DIV есть еще DIV, который называется контроллером. Когда я нажимаю на контроллер, левый DIV должен скользить влево, например, slideToggle(), но контроллер и правый DIV должны придерживаться левой скользящей DIV. И если я снова нажму на контроллер, когда левый DIV больше не отображается, он должен сдвинуться вправо, а контроллер и правый DIV должны иметь тот же эффект слайда. Контроллер DIV и справа DIV всегда отображается!

Вот скрипка примера я строй:
https://jsfiddle.net/6ydy0o95/

Answer 1

Если я правильно понял, slideToggle точно не подходит здесь, как она переключает dispay, в то время как в описании вам скорее нужно переключая ширину левой DIV - от 400 пикселей до 0 и обратно. https://jsfiddle.net/6ydy0o95/2/

Основные трудности в вашем примере, который я нашел, - заставить аудио растягивать все остальное пространство, когда левая панель div # включена и выключена. Для этого я оставляю #audio без каких-либо спецификаций позиции - никаких поплавков, отображения, ширины предопределены. #bar и #controller заданы определенная ширина и float: left;

#bar { 
    width:400px; 
    float:left; 
} 

#controller { 
    float:left; 
    width:20px; 
} 

Надеюсь, это сделает то, что вам нужно.

Answer 2

Вы можете анимировать некоторые, как это. Я подготовил DEMO. Я сделал только 1 DIV ... то же самое можно применить везде, где вы хотите

$(".bar_item").click(function(){ 
if($(".bar_item").css('margin-left') === "0px") 
{ 

    $(".bar_item").animate({"margin-left": '-=190'}); 
} 
else 
{ 

$(".bar_item").animate({"margin-left": '+=190'}); 
} 


}); 

JSFiddle