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

dr.5y51em 06.12.2010 00:49

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

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


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


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

dr.5y51em 06.12.2010 01:42

Хм, вопрос номер 3 появился, почему данный код не срабатывает в Firefox:
$('.menu_item').mousemove(function(){
		$("#hover_menu").offset({left:$(this).offset().left});
		$('#hover_menu').css({width:  $(this).css('width')});
	});

dr.5y51em 06.12.2010 03:30

Цитата:

Сообщение от 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 поправить.

exec 06.12.2010 04:56

Цитата:

Возможно ли при помощи animate устанавливать offset?
left и top работают только для элементов с position: absolute.

dr.5y51em 06.12.2010 04:58

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

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

exec 06.12.2010 06:57

http://htmlbook.ru/css/left

Цитата:

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

monolithed 06.12.2010 07:31

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

dr.5y51em 06.12.2010 07:31

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

dr.5y51em 06.12.2010 07:35

Цитата:

Сообщение от 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')});
	});
});


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

dr.5y51em 06.12.2010 08:35

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


Часовой пояс GMT +3, время: 19:43.