Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.12.2010, 00:49
Интересующийся
Отправить личное сообщение для dr.5y51em Посмотреть профиль Найти все сообщения от dr.5y51em
 
Регистрация: 23.09.2010
Сообщений: 18

Два вопроса по animate
Проблема №1
$('#hover_menu').animate({width:  $(this).css('width')});

Данный код увеличивает ширину, но почему то не уменьшает.


Вопрос №2
Возможно ли при помощи animate устанавливать offset?
$("#hover_menu").offset({left:$(this).offset().left});


За ранее спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 06.12.2010, 01:42
Интересующийся
Отправить личное сообщение для dr.5y51em Посмотреть профиль Найти все сообщения от dr.5y51em
 
Регистрация: 23.09.2010
Сообщений: 18

Хм, вопрос номер 3 появился, почему данный код не срабатывает в Firefox:
$('.menu_item').mousemove(function(){
		$("#hover_menu").offset({left:$(this).offset().left});
		$('#hover_menu').css({width:  $(this).css('width')});
	});
Ответить с цитированием
  #3 (permalink)  
Старый 06.12.2010, 03:30
Интересующийся
Отправить личное сообщение для dr.5y51em Посмотреть профиль Найти все сообщения от dr.5y51em
 
Регистрация: 23.09.2010
Сообщений: 18

Сообщение от dr.5y51em Посмотреть сообщение
Хм, вопрос номер 3 появился, почему данный код не срабатывает в Firefox:
$('.menu_item').mousemove(function(){
		$("#hover_menu").offset({left:$(this).offset().left});
		$('#hover_menu').css({width:  $(this).css('width')});
	});
Пардон, в FF всё работает, надо было z-index поправить.
Ответить с цитированием
  #4 (permalink)  
Старый 06.12.2010, 04:56
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

Цитата:
Возможно ли при помощи animate устанавливать offset?
left и top работают только для элементов с position: absolute.
Ответить с цитированием
  #5 (permalink)  
Старый 06.12.2010, 04:58
Интересующийся
Отправить личное сообщение для dr.5y51em Посмотреть профиль Найти все сообщения от dr.5y51em
 
Регистрация: 23.09.2010
Сообщений: 18

offset же определяется относительно документа, а не относительно родительского элемента, так что причём тут position?

Я же сейчас могу задавать offset $("#hover_menu").offset({left:$(this).offset().lef t}); и этому методу абсолютно пофиг на позиционирование, меня интересует, можно ли устанавливать offset при помощи animate.

Последний раз редактировалось dr.5y51em, 06.12.2010 в 05:01.
Ответить с цитированием
  #6 (permalink)  
Старый 06.12.2010, 06:57
Профессор
Отправить личное сообщение для exec Посмотреть профиль Найти все сообщения от exec
 
Регистрация: 21.01.2010
Сообщений: 1,022

http://htmlbook.ru/css/left

Цитата:
Отсчет координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его левого края.
Ответить с цитированием
  #7 (permalink)  
Старый 06.12.2010, 07:31
Особый гость
Посмотреть профиль Найти все сообщения от monolithed
 
Регистрация: 02.04.2010
Сообщений: 4,260

dr.5y51em опишите проблему конкретней, какого результата вы хотите добиться?
Ответить с цитированием
  #8 (permalink)  
Старый 06.12.2010, 07:31
Интересующийся
Отправить личное сообщение для dr.5y51em Посмотреть профиль Найти все сообщения от dr.5y51em
 
Регистрация: 23.09.2010
Сообщений: 18

В моём случае, нельзя этим элементам присваивать абсолютное позиционирование, т.к. это элементы списка li выстроенные по горизонтали и если я им поставлю absolute, то они слипнутся в кучу.
Ответить с цитированием
  #9 (permalink)  
Старый 06.12.2010, 07:35
Интересующийся
Отправить личное сообщение для dr.5y51em Посмотреть профиль Найти все сообщения от dr.5y51em
 
Регистрация: 23.09.2010
Сообщений: 18

Сообщение от monolithed Посмотреть сообщение
dr.5y51em опишите проблему конкретней, какого результата вы хотите добиться?
Это меню, вот html код меню:
<div style="position:relative;">
    	<div id="menu">
        	<li class="menu_item" id="menu_item0"><a href="#">пункт0</a></li>
            <li class="menu_item" id="menu_item1"><a href="#">пункт1</a></li>
            <li class="menu_item" id="menu_item2"><a href="#">пункт2</a></li>
            <li class="menu_item" id="menu_item3"><a href="#">пункт3</a></li>
            <li class="menu_item" id="menu_item4"><a href="#">пункт4</a></li>
            <div style="position:relative;">
            	<div id="hover_menu"></div>
          </div>
        </div>
    </div>


Вот CSS
Код:
#menu {
	position: absolute;
	width: 700px;
	left: 271px;
	top: -29px;
	z-index:999;
	text-align: left;
	vertical-align: top;
}
#menu li {
	text-align: left;
	display: inline-block;
	list-style-type: none;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #FFF;
	margin-left: 20px;
}
#hover_menu {
	background-color: #F00;
	position: absolute;
	height: 8px;
	left: 20px;
	top: -1px;
	z-index:-997;
}
#menu a {
	color: #FFF;
	text-decoration: none;
}
Вот JS:
$(document).ready(function(){
	$('#hover_menu').css('width', $('#menu_item0').css('width'));
	$('.menu_item').mousemove(function(event){
		$("#hover_menu").offset({left:$(this).offset().left});
		$('#hover_menu').css({width:  $(this).css('width')});
	});
});


Задача состоит в том, что бы див, который перемещается ниже пунктов меню, "знал" координаты пунктов и плавно перемещался, плавно меняя ширину в зависимости от ширины пункта меню.
Ответить с цитированием
  #10 (permalink)  
Старый 06.12.2010, 08:35
Интересующийся
Отправить личное сообщение для dr.5y51em Посмотреть профиль Найти все сообщения от dr.5y51em
 
Регистрация: 23.09.2010
Сообщений: 18

Всё решил, остался последний вопрос, могу ли я установить offset при помощи animate?
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Два вопроса по XMLHTTPRequest Pluto Общие вопросы Javascript 7 22.09.2010 21:43
Animate и IE greatilya jQuery 2 25.06.2010 10:10
Блок переключения меню на JS, два скрипта в одном файле Dizeloid Элементы интерфейса 0 30.07.2009 11:03
Два одинаковых сценария на одной странице Genetics Общие вопросы Javascript 7 12.07.2009 00:46
Два очень важных вопроса Гость Internet Explorer 3 26.07.2008 19:45