Развертывание/сворачивание блока
Здравствуйте. Вопрос от новичка.
Имеем вот такую верстку:
<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);
});
});
|
$(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 мс действие и при двойном клике будет лажа. В общем надо ещё проверять закончено текущая анимация или нет. |
Не правильно ты, дядя Федор, бутерброд еш... (с)
<!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>
|
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 06:48. |