Уезжающий налево див по средствами jq

[a1rborn]

Возникла проблема с реализацией следующего:

есть три дива, вертикально расположенных друг за другом. Есть также img (позиционирован абсолютно), он служит "кнопкой" и находиться между(поверх) 2 и 3 дивом.

Хотел сделать так, что бы при нажатии на этот img - див2 уезжал налево и исчезал (типа slideUp, только влево), и одновременно с ним, смещался налево этот самый img на x пикселей, но не исчезал

И при повторном нажатии на Img див2 выезжал направо и img так же направо.

Перепробовал много способов,

вешал click, toggle, animate все всегда по разному получалось.

К примеру, вроде бы (как я думал ), должен был помочь

/*$(document).ready(function(){
$(".io").toggle(
function(){$(".col2").animate({'left':'50'},2000,'swing');},
function(){$(".col2").animate({'right':'50'},2000,'swing');}
);

});*/

или

$(document).ready(function(){
$(".io").click(function(){
$(".colx").animate({'left':'50'},2000,'swing')
}, function(){
$(".colx").animate({'right':'50'},2000,'swing')
});
});

и т.д. Но получается не совсем так как надо, по мимо предложенных мной было еще куча кода, но тщетно.

Понимаю, что не совсем понимаю (извиняюсь) саму структуру построения

Получилось один раз сделать только что бы при нажатии на img див уезжал, но не выезжал обратно.

Направьте на путь истинный дамы и господа, буду премного благодарен!

PS Не обязательно решать мою проблему, помогли бы пару советов и разъяснение реализации моей идеи =)

Edited January 23, 2013 by a1rborn

[Daiver]

Как-то было я заморочилась с подобной проблемой. Реализовывала на чистом js. Только в моем случае все уезжает вниз, а не в сторону.

Посмотреть как работает можно тут. Выезжает через 2 сек. после загрузки страницы. А исходники можно посмотреть вот тут. Только на странице с исходником надо вручную поменять кодировку на юникод.

[Sensei]

Так? http://jsfiddle.net/335wB/

[a1rborn]

Да, то что нужно! Буду пробовать у себя, благодарю

Если есть возможность укажите все ли верно понимаю и описываю скрипт=)

$('.btn').on('click', function() { // при клике на бтн вызываем функцию

if (!$(this).data('active')) { // если (устанавливаем значение бтн "актив")
	 $(this).data('active', true) // бтн имеет значение "актив" (об этом говорит true)
		 .animate({ // применяем анимейт
			 'left':0, //налево к 0пкс.
			 'margin-left': 0 //отступ слева 0пкс.
		 }, 700); //время 700мс

	 $('.block').animate({'left': '-100%'}, 700); //и к блоку применить анимейт налево -100%
}
else { //иначе
	 $(this).data('active', false) //если бтн не имеет значение актив
		 .animate({ // применяем
			 'left': '50%', // то то
			 'margin-left': '-75px' //и то то
		 }, 700);	

	 $('.block').animate({'left': 0}, 700); //и т.д.
};

});

PS Что означает ! во 2 строке кода?

Edited January 24, 2013 by a1rborn

[Sensei]

Для сохранения состояния используется метод data.

Если при клике в data запись active НЕ true (! - это логическое НЕ).

Значит элементы в своем исходном состоянии.

active переключаем в true и сдвигаем элементы влево.

При следующем клике active будет true. Значит элементы уже сдвинуты.

active переключаем в false и сдвигаем элементы вправо в исходное состояние.

Надеюсь прояснил.

[a1rborn]

Благодарю от души, все прояснили)

[a1rborn]

Возник еще один вопрос, связанный с данным кодом, задам его в отдельной теме