Вход

Просмотр полной версии : animate проблема в Chrome и FF


Vdomah
29.01.2013, 14:07
Продолжаю работать над Lavalamp menu (эта тема: http://javascript.ru/forum/dom-window/34946-lavalamp-menu-nuzhno-dorabotat.html)

Там эффект перетекания эл-та 'div.floatr' реализовывался с помощью css3. Теперь, оптимизируя под IE, делаю с помощью animate.

Было так: $('.lavalamp li').hover(function(){

var left = $(this).offset().left - $('.lavalamp li.active').offset().left;

var width = $(this).width() + "px";
var sictranslate = "translate("+left+"px, 0px)";

$(this).parent('ul').next('div.floatr').css({
"width": width,
"-webkit-transform": sictranslate,
"-moz-transform": sictranslate
});
Добился чтобы красиво работало в ИЕ9:
$('.lavalamp li').hover(function(){

var left = $(this).offset().left - $('.lavalamp li.active').offset().left;
var width = $(this).width() + "px";

$('div.floatr')
.css({"width": width,})
.stop(true)
.animate({left: left}, 500);
Но возникли траблы:
- в Chrome 'div.floatr' ползет в нужном направлении, но в начале движения появляется задержка, т.е. он как бы долго разгоняется, при чем, если водить по пунктам меню, то задержка расчехляется вообще медленно, т.е. получается накапливается

- в FF вообще сбилось позиционирование. Т.е. есть 6 пунктов меню. Если активен 1й - все ок. Активен 2й - 'div.floatr' при наведении переезжает, но "промахивается" на 1 пункт влево от нужного. Активен 3й - на 2 пункта от нужного и тд.

- решил еще в Safari загнать: почти тоже, что и в Хроме, но начального торможения нет, а движение происходит правильно, но начинается после небольшой задержки. И в Опере тоже самое.
Плиз хелп))

Vdomah
29.01.2013, 14:58
Пока решил с помощью if($.browser.тратата). Но хотелось бы все-таки понять почему animate такие результаты разные выбрасывает.

Но проблема с начальным торможением еще актуальна

DjDiablo
29.01.2013, 15:49
я не замечал никаких торможений.
Где потыкать можно ?

Vdomah
29.01.2013, 19:08
Извини, пока не могу закинуть, скоро выложу на хост.

Проблема в итоге вылезла такая. Во всех браузерах норм с помощью того же CSS3, IE9 выделывает то, что раньше FF:
Т.е. есть 6 пунктов меню. Если активен 1й - все ок. Активен 2й - 'div.floatr' при наведении переезжает, но "промахивается" на 1 пункт влево от нужного. Активен 3й - на 2 пункта от нужного и тд.
if($.browser.webkit || $.browser.mozilla || $.browser.opera){
var sictranslate = "translate("+left+"px, 0px)";
$(this).parent('ul').next('div.floatr').css({
"width": width,
"-webkit-transform": sictranslate,
"-moz-transform": sictranslate
});
}else{

$(this).parent('ul').next('div.floatr')
.css({"width": width,})
.stop(true)
.animate({left: left }, 300);
}
При чем, в обоих случаях используется один и тот же параметр left. Или transform работает не так как animate или IE не так считает offset() как другие браузеры, или что еще?

DjDiablo
29.01.2013, 20:04
Извини, пока не могу закинуть,
Извини пока не могу помочь