Javascript-форум - Два вопроса по animate

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Два вопроса по animate (https://javascript.ru/forum/jquery/13607-dva-voprosa-po-animate.html)

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

Проблема №1

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

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

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

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

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

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

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

Цитата:

Сообщение от dr.5y51em (Сообщение 82438)

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

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

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

Цитата:

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

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

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

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

http://htmlbook.ru/css/left

Цитата:

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

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

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

Цитата:

Сообщение от monolithed (Сообщение 82453)

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

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

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

Можете, если учтёте то, что я написал в шестом посте. Конкретно в вашем случае нужно изменять margin-left, а не left.