Форум

goooooch · #1 (**permalink**) 26.11.2012, 13:39

Здравствуйте. Вопрос от новичка.

Имеем вот такую верстку:

<html>
<head>
<style>
#login-block
{
width:100px; 
height:100px; 
background:#ссс; 
position:absolute; 
left:0; 
top:-100px;
}
</style>
</head>
<body>
<div  id="login-block"> Скрытый блок     
</div>
<a id="show-reg-form">Трансформировать</a>
</body>
</html>

Мне нужно, чтобы
1. если у div#login-block св-во top:-100px, то по клику на ссылку у div#login-block менялось значение css-свойства top:0
2. если у div#login-block св-во top:0, то по клику на ссылку у div#login-block менялось значение css-свойства top:-100px

Первую часть сделал (может криво или подошел не с того конца), а вот со второй частью нужна помощь.

$(function()
{

$('#show-reg-form').click(function()
{

    $('#login-block').animate({"top":"0"}, 500);   
 
});

});

cmd · #2 (**permalink**) 26.11.2012, 14:08

$(function() {
	var toggle_stat = fasle;
	$('#show-reg-form').click(function() {
		if (toggle_stat == false) {
			$('#login-block').animate({"top":"0"}, 500);   
			toggle_stat = true;
		} else {
			$('#login-block').animate({"top":"100"}, 500);   
			toggle_stat = false;
		}
	});
});

P.S. Только это ж анимация и там 500 мс действие и при двойном клике будет лажа. В общем надо ещё проверять закончено текущая анимация или нет.

ksa · #3 (**permalink**) 26.11.2012, 14:08

Не правильно ты, дядя Федор, бутерброд еш... (с)

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
#login-block {
	width:100px; 
	height:100px; 
	background:#ссс; 
	position:absolute; 
	left:0; 
	top: 0;
}
#login-block.off {
	top:-100px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
	$('#show-reg-form').click(function () {
		$('#login-block').toggleClass('off');
	});
});
</script>
</head>
<body>
<div  id="login-block" class='off'> Скрытый блок     
</div>
<a id="show-reg-form">Трансформировать</a>
</body>
</html>

goooooch · #4 (**permalink**) 26.11.2012, 14:28

Сообщение от cmd

cmd

Ваш вариант работает, спасибо

cmd · #5 (**permalink**) 26.11.2012, 15:37

Сообщение от ksa

Не правильно ты, дядя Федор, бутерброд еш... (с)

ksa, да, но анимация

Форум

Справочник

Discord чат

Курсы javascript