Два вопроса по animate

[dr.5y51em]

Проблема №1

$('#hover_menu').animate({width:  $(this).css('width')});

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


Вопрос №2
Возможно ли при помощи animate устанавливать offset?

$("#hover_menu").offset({left:$(this).offset().left});

За ранее спасибо

[dr.5y51em]

Хм, вопрос номер 3 появился, почему данный код не срабатывает в Firefox:

$('.menu_item').mousemove(function(){
		$("#hover_menu").offset({left:$(this).offset().left});
		$('#hover_menu').css({width:  $(this).css('width')});
	});

[dr.5y51em]

$('.menu_item').mousemove(function(){
		$("#hover_menu").offset({left:$(this).offset().left});
		$('#hover_menu').css({width:  $(this).css('width')});
	});

Пардон, в FF всё работает, надо было z-index поправить.

[exec]

Возможно ли при помощи animate устанавливать offset?

left и top работают только для элементов с position: absolute.

[dr.5y51em]

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

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

[exec]

http://htmlbook.ru/css/left

Отсчет координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его левого края.

[monolithed]

dr.5y51em опишите проблему конкретней, какого результата вы хотите добиться?

[dr.5y51em]

В моём случае, нельзя этим элементам присваивать абсолютное позиционирование, т.к. это элементы списка li выстроенные по горизонтали и если я им поставлю absolute, то они слипнутся в кучу.

[dr.5y51em]

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')});
	});
});

Задача состоит в том, что бы див, который перемещается ниже пунктов меню, "знал" координаты пунктов и плавно перемещался, плавно меняя ширину в зависимости от ширины пункта меню.

[dr.5y51em]

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