Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.11.2012, 11:39
Аспирант
Отправить личное сообщение для goooooch Посмотреть профиль Найти все сообщения от goooooch
 
Регистрация: 24.10.2010
Сообщений: 46

Развертывание/сворачивание блока
Здравствуйте. Вопрос от новичка.

Имеем вот такую верстку:
<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);   
 
});

});
Ответить с цитированием
  #2 (permalink)  
Старый 26.11.2012, 12:08
Аватар для cmd
cmd cmd вне форума
Профессор
Отправить личное сообщение для cmd Посмотреть профиль Найти все сообщения от cmd
 
Регистрация: 19.03.2011
Сообщений: 177

$(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 мс действие и при двойном клике будет лажа. В общем надо ещё проверять закончено текущая анимация или нет.
__________________
Cogito, ergo sum
Ответить с цитированием
  #3 (permalink)  
Старый 26.11.2012, 12:08
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 13,830

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

<!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>
Ответить с цитированием
  #4 (permalink)  
Старый 26.11.2012, 12:28
Аспирант
Отправить личное сообщение для goooooch Посмотреть профиль Найти все сообщения от goooooch
 
Регистрация: 24.10.2010
Сообщений: 46

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

Последний раз редактировалось goooooch, 26.11.2012 в 13:14.
Ответить с цитированием
  #5 (permalink)  
Старый 26.11.2012, 13:37
Аватар для cmd
cmd cmd вне форума
Профессор
Отправить личное сообщение для cmd Посмотреть профиль Найти все сообщения от cmd
 
Регистрация: 19.03.2011
Сообщений: 177

Сообщение от ksa
Не правильно ты, дядя Федор, бутерброд еш... (с)
ksa, да, но анимация
__________________
Cogito, ergo sum
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавное раскрытие и сворачивание блока StyLLeR jQuery 6 07.07.2014 15:00
вычисление и фиксация ширины блока konstantin-mn jQuery 2 27.08.2012 10:42
слайд панели tadjik1 Элементы интерфейса 22 02.04.2012 16:13
Перекрывание блока, z-index antserg jQuery 4 08.11.2011 18:27
Два блока div разъезжаются при скроллинге окна браузера. call007 jQuery 0 03.04.2011 15:21