VPF::Анимация div-ов с помощью jQuery - Форум программистов

denozavr

Дата 18.9.2010, 19:14 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 38
Регистрация: 25.1.2010

Репутация: нет
Всего: нет

http://ipicture.ru/uploads/100918/iVW72hvLO4.jpg
Можете помочь,подсказать...на рисунке у меня 3 div - а,у готорых задана относительная позиция главного дива....блоки 2 и 3 спрятаны под 1-й(z-index)..Хочу сделать так,что бы при наведении на блок(или при нажатии кнопки которая будет) блоки немножко выезжали....это нужно у свойства "top" со значениями что то делать?С jquery начал только разбираться..может кто поможет,или посоветует что либо..буду благодарен!
Начал разбираться, с .slideToggle() получается,но у меня все позиционированием...и плюс .slideDown() не пашет,а мне именно это надо,подвинуть в низ на несколько пикселей,а потом в свер[отросток]..логику знаю,надо .slideDown() и .slideUp() и одну булеву переменную которая проверяет ,когда в вызывать .slideDown() а когда .slideUp() (в зависимости куда нам надо,если false - вниз,а true - обратно в верх на несколько пикселей)((Скинул исходник(с комментариями),там все просто,может я как то не так делаю,помогите пожалуйста...

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link rel="stylesheet" href="styles.css" type="text/css" /><script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
    google.load("jquery", "1.4.2");
    google.load("jqueryui", "1.8");
</script>
<script type="text/javascript">

    $(document).ready(function () {

        $("#left_menu").click(function () {

            $("#left_menu").slideDown("slow");    <!--Вообще не пашет-->

        });

    });
</script>
</head>

<body>
<div id="container">
<div id="header" style="background-image:url('./head.png');background-repeat: no-repeat; margin:0 auto;">

</div>

<div id="menu" style="background-image:url('./menu.png');height:174px; position:relative;top:-270px; z-index:2;">
</div>
<div style="position:relative;top:-430px; z-index:1;">
<!-
как сделать что бы блок с id left_menu выезжал в низ на
несколько пискеселей с анимацией...Метод .slideDown("slow")вообще не работает
а метод .slideToggle() работает,но подымает в верх блок,а мне надо что бы
вниз и на несколько пикселей,и остановилось потом....

-->
<div style="width:225px;height:180px; background-image:url('./left_block.png'); float:left;" id="left_menu"></div>
<div style="width:225px;height:180px; background-image:url('./right_block.png'); float:right;"></div>
</div>
<div id="content" style="color:#FFF;border:1px solid #4f7ec9; position:relative;top:-270px; height:1010px;" >
<table  cellpadding="0" cellspacing="0" style="position:relative;top:-140px; margin:0 auto; width:940px;">
<tr>
<td id="left_top"  height="8" width="8"></td>
<td id="centet_top" height="8"></td>
<td id="right_top"  height="8" width="8"></td>
</tr>
<tr>
<td id="left_center" width="8"></td>
<td id="center_center">


</td>
<td id="right_center" width="8"></td>
</tr>
<tr>
<td id="left_bottom" height="8" width="8"></td>
<td id="center_bottom" height="8" ></td>
<td id="right_bottom" height="8" width="8"></td>
</tr>
</table>
</div>
</div>
</body>
</html>

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Применение библиотек \| Следующая тема »