Показать сообщение отдельно
  #1 (permalink)  
Старый 05.08.2009, 13:08
Новичок на форуме
Отправить личное сообщение для leCadavreExquis Посмотреть профиль Найти все сообщения от leCadavreExquis
 
Регистрация: 09.07.2009
Сообщений: 1

анимированное меню на 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;', то мигание происходит один раз

Код
$(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");

        }
    );

});


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