Продолжаю работать над Lavalamp menu (эта тема:
lavalamp menu нужно доработать)
Там эффект перетекания эл-та '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 загнать: почти тоже, что и в Хроме, но начального торможения нет, а движение происходит правильно, но начинается после небольшой задержки. И в Опере тоже самое.
Плиз хелп))