Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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");

        }
    );

});


Поделитесь, пожалуйста, соображениями по поводу такого необычного поведения ишака...
Ответить с цитированием
  #2 (permalink)  
Старый 05.08.2009, 14:23
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

Вы думаете в этом коде можно разобраться?
Ответить с цитированием
  #3 (permalink)  
Старый 30.12.2009, 16:44
Новичок на форуме
Отправить личное сообщение для Alexela Посмотреть профиль Найти все сообщения от Alexela
 
Регистрация: 02.07.2009
Сообщений: 3

Ишак не в курсе за offsetLeft или offsetTop
$(this).offset();
Ответить с цитированием
  #4 (permalink)  
Старый 30.12.2009, 17:30
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,566

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ищу jQuery плагин для создания меню Zeboton jQuery 9 15.09.2014 15:31
Как "переключать" картинки в меню навигации? KirTer Элементы интерфейса 1 22.06.2009 11:49
JS меню работает на обычной html странице, а на юкозовском движке нет. adware Я не знаю javascript 10 16.05.2009 16:48
Событие mouseout при наведении мыши на пункт меню WalterScott Events/DOM/Window 2 12.05.2009 22:05
Ссылка под слоем перекрывает слой Devider Общие вопросы Javascript 7 24.02.2009 23:18