Почему не работает switch toggle?

Question

[loogle18]

Всем привет!

Подскажите, почему не работает "самопальный" switch toggle?
HTML:

<div id="flip_switch">
		<div class="toogleBut"></div>
</div>

CSS для него:

#flip_switch {
	display: block;
	position: absolute;
	width: 400px;
	height: 220px;
	border-radius: 120px;
	background-color: #1b1c27;
	-moz-box-shadow: inset 0 0 10px #000000;
   	-webkit-box-shadow: inset 0 0 10px #000000;
   	box-shadow: inset 0 0 10px #000000;
}
.toogleBut {
	top: 10px;
	left: 10px;
	position: relative;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background-color: #444657;
	box-shadow: inset 0px 8px 0px 0px #575a6d;
}

Вот код на jQuery:

var toogleMain = $('#flip_switch');
	var toogleBut = $('.toogleBut');
	var toogleBut2 = toogleBut.css('left');
	toogleBut.click(function() {
		if(parseInt(toogleBut2) < 11) {
		toogleBut.animate({'left' : '190'}, 500, function() {
			toogleMain.animate({'backgroundColor' : '#2cca91'}, 10)
		});
		}
		else {
			toogleBut.animate({'left' : '10'}, 500, function() {
				toogleMain.animate({'backgroundColor' : '1b1c27'}, 10)
			});
		}
	});

Вот, как выглядит:
При первом нажатии на круглую кнопку все работает (она сдвигается вслево и меняется цвет основного блока), но при повторном клике она не хочет обратно уезжать влево...
Подскажите пожалуйста, в чем проблема?
Может где ошибку допустил, или условие не так прописал?
Может реализовую не так, как надо?

Заранее благодарен за ответы!

Answer 1

[Никита К.]

Вы не обновляете переменную toogleBut2 , в конце события снова присвойте toogleBut2 = toogleBut.css('left');

Comments

[loogle18]

Спасибо большое!;) Но вот у меня возникла 1-а проблемка: переключатель назад работает не с первого раза, а со второго? Это нормально или это можно исправить?

[Никита К.]

Суть в том что при обновлении значения после выполнения условий анимация еще не завершилась, а значение уже присвоено. Т.е. пока движется switcher значение toogleBut2 уже обновлено, и это происходит так быстро что оно остается равным 10px.
Короче говоря надо использовать callback функцию метода animate().
Вот ссылка, я там что то удалил, но суть таже
jsfiddle.net/bonilka/zrhqnLcq

[loogle18]

bonilka: Спасибо огромное за помощь ;) Суть, вроде бы, понял. Почитаю про это больше!
Спасибо!