animate проблема в Chrome и FF
 

Продолжаю работать над Lavalamp menu (эта тема: http://javascript.ru/forum/dom-windo...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 загнать: почти тоже, что и в Хроме, но начального торможения нет, а движение происходит правильно, но начинается после небольшой задержки. И в Опере тоже самое.
Плиз хелп))

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

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

я не замечал никаких торможений.
Где потыкать можно ?

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

Проблема в итоге вылезла такая. Во всех браузерах норм с помощью того же CSS3, IE9 выделывает то, что раньше FF:

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() как другие браузеры, или что еще?

Извини пока не могу помочь