Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   анимированное меню на jquery глючит в ie (https://javascript.ru/forum/jquery/4585-animirovannoe-menyu-na-jquery-glyuchit-v-ie.html)

leCadavreExquis 05.08.2009 13:08

анимированное меню на 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");

        }
    );

});


Поделитесь, пожалуйста, соображениями по поводу такого необычного поведения ишака...

Андрей Параничев 05.08.2009 14:23

Вы думаете в этом коде можно разобраться?

Alexela 30.12.2009 16:44

Ишак не в курсе за offsetLeft или offsetTop
$(this).offset();

micscr 30.12.2009 17:30

Вообще метод $('...').offset() возвращает данные о смещении относительно документа ,
но в IE он возвращает данные о смещении относительно окна.
Т.е. надо еще додумывать с $('...').scrollTop(), $('...').scrollLeft()


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