анимированное меню на jquery глючит в ie
Вот здесь анимированная менюшка, работающая во всех нормальных браузерах. В ie (у меня стоит Internet Explorer Colection и глючит во всех: 6-8) при наведении на пункт (class="panel _elem"):
- шарик(class="sharik") дергается влево, как если бы мы на мгновение отвели мышку с пункта, хотя div пункта (class="panel _elem") перекрывает шарик и находится на слое с большИм z-index. т.е. на шарик мы по идее не должны попадать. - выпадающтй список (class="link_menu") трижды мигает, когда мы переводим курсор с пункта на его список с подпунктами. Причем замечена интересная особенность - если в классе panel_elem прописать какой-нибудь фоновый цвет для блока, например 'background-color: red;', то мигание происходит один раз:blink: Код $(document).ready(function() { // скорость шарика, можно менять (чем меньше тем быстрее) ballspeed = 1; $(".link_menu").hover(//на пункты в выпадающем списке function() { $("a",$(this)).css("color", "white"); $(this).css("border-bottom","1px solid white");}, function() { $("a",$(this)).css("color", "#1E5FB4"); $(this).css("border-bottom","1px solid #1E5FB4"); } ); $(".panel_elem").hover ( function() //наведение мышкой на пункт меню { link=$("a", $(this)).attr("href"); $("img", $(this)).attr("src", link+"menu_img_act.jpg"); offset=$(this).offset(); left = offset.left + $(this).width()/2 - 32; $(".menu_list", $(this).parent()).show(); $(".menu_text", $(this)).css("color","#99BDEF"); $(".sharik #baller",$(this).parent().parent().parent()).attr("src", "/bitrix/templates/hyun_main/images/menu_ball_blue.gif"); //меняю картинку шарика $(".sharik",$(this).parent().parent().parent()).stop(); //останавливаем предыдущую анимацию если она была b_off = $(".sharik #baller",$(this).parent().parent().parent()).offset(); //для шарика $(".sharik",$(this).parent().parent().parent()).animate({left: left+"px"}, {duration: Math.abs(b_off.left - left)*ballspeed+100, easing: "swing", queue: false}); $(".menu_list",$(this).parent()).css("left",left-$(".menu_list").width()/2+"px"); }, function() //отведение мышки от пункта меню { link=$("a", $(this)).attr("href"); $("img", $(this)).attr("src", link+"menu_img.jpg"); $(".menu_list", $(this).parent()).hide(); $(".menu_text", $(this)).css("color","#4F4F4F"); $(".sharik #baller",$(this).parent().parent().parent()).attr("src", "/bitrix/templates/hyun_main/images/menu_ball.gif"); //меняю картинку шарика $(".sharik",$(this).parent().parent().parent()).stop(); //останавливаем предыдущую анимацию если она была b_off = $(".sharik #baller",$(this).parent().parent().parent()).offset(); //для шарика $(".sharik",$(this).parent().parent().parent()).animate({left: "0px"}, {duration: Math.abs(b_off.left - 0)*ballspeed+100, easing: "swing", queue: false}); } ); $(".menu_list").hover//над выпадающим списком ( function() //наведение мышкой на пункт меню { link=$(".panel_elem a", $(this).parent()).attr("href"); $(".panel_elem img", $(this).parent()).attr("src", link+"menu_img_act.jpg"); offset=$(".panel_elem",$(this).parent()).offset(); left = offset.left + $(".panel_elem",$(this).parent()).width()/2 - 32; $(this).show(); $(".panel_elem .menu_text", $(this).parent()).css("color","#99BDEF"); $(".sharik #baller",$(this).parent().parent().parent()).attr("src", "/bitrix/templates/hyun_main/images/menu_ball_blue.gif"); //меняю картинку шарика $(".sharik",$(this).parent().parent().parent()).stop(); //останавливаем предыдущую анимацию если она была b_off = $(".sharik #baller",$(this).parent().parent().parent()).offset(); //для шарика $(".sharik",$(this).parent().parent().parent()).animate({left: left+"px"}, {duration: Math.abs(b_off.left - left)*ballspeed+100, easing: "swing", queue: false}); $(this).css("left",left-$(this).width()/2+"px"); }, function() //отведение мышки от пункта меню { link=$(".panel_elem a", $(this).parent()).attr("href"); $(".panel_elem img", $(this).parent()).attr("src", link+"menu_img.jpg"); $(this).hide(); $(".panel_elem .menu_text", $(this).parent()).css("color","#4F4F4F"); $(".sharik #baller",$(this).parent().parent().parent()).attr("src", "/bitrix/templates/hyun_main/images/menu_ball.gif"); //меняю картинку шарика $(".sharik",$(this).parent().parent().parent()).stop(); //останавливаем предыдущую анимацию если она была b_off = $(".sharik #baller",$(this).parent().parent().parent()).offset(); //для шарика $(".sharik",$(this).parent().parent().parent()).animate({left: "0px"}, {duration: Math.abs(b_off.left - 0)*ballspeed+100, easing: "swing", queue: false}); } ); $(".horizontal_level").hover //над одним из трех разделов верхнего уровня ( function() //наведение мышкой на меню { link=$("div.flt > a.link", $(this)).attr("href"); $(this).css("background","url(/bitrix/components/propodhod/menu/templates/main_menu_hy/images/horiz_level_back_act.gif) left bottom repeat-x"); $("div.flt a.link img.parent_img", $(this)).attr("src", link+"menu_img_act.jpg"); $(".sharik #baller",$(this)).attr("src", "/bitrix/templates/hyun_main/images/menu_ball_blue.gif"); }, function() //отведение мышки от меню { link=$("div.flt > a.link", $(this)).attr("href"); $(this).css("background","url(/bitrix/components/propodhod/menu/templates/main_menu_hy/images/horiz_level_back.gif) left bottom repeat-x"); $("div.flt a.link img.parent_img", $(this)).attr("src", link+"menu_img.jpg"); $(".sharik #baller",$(this)).attr("src", "/bitrix/templates/hyun_main/images/menu_ball.gif"); } ); }); Поделитесь, пожалуйста, соображениями по поводу такого необычного поведения ишака... |
Вы думаете в этом коде можно разобраться?
|
Ишак не в курсе за offsetLeft или offsetTop
$(this).offset(); |
Вообще метод $('...').offset() возвращает данные о смещении относительно документа ,
но в IE он возвращает данные о смещении относительно окна. Т.е. надо еще додумывать с $('...').scrollTop(), $('...').scrollLeft() |
Часовой пояс GMT +3, время: 03:36. |