Как анимировать jquery MagicLine Навигация с другим цветом нижней границы

-3

Я пытаюсь сделать анимацию меню для своего сайта. Я хочу использовать jQuery MagicLine Navigation. взгляните на магическую демо-версию: http://css-tricks.com/examples/MagicLine Как анимировать jquery MagicLine Навигация с другим цветом нижней границы

есть 2 примера, один - нормальный нижний край, второй - другой разной цветной анимации при наведении указателя мыши. теперь чего я хочу? Я хочу использовать 1-ю демоверсию, но мне нужна другая нижняя граница цвета, например, 2-я демо.

Может ли кто-нибудь мне помочь?

источник

2013-06-13 kinjal

вы пробовали что-нибудь? Если вы попробовали, укажите ссылку с вашим кодом. – Nitesh

Нет, я хочу, чтобы 1-й пример был таким же, но когда я наводил указатель мыши на ссылки, изменил нижний цвет границы, как демо 2. во втором меню изменения цвета фона меню, но я хочу, чтобы изменение цвета нижней границы ... возможно? – kinjal

Есть несколько модификаций должно быть сделано. HTML/CSS/jQuery

Перейдите на ваш HTML-файл и обновите все теги a в <li> s 'от <ul id="example-one">. Эти теги должны иметь атрибут «rel», и этот атрибут имеет значение вашего цвета нижней границы. Как и демо 2 (вы можете увидеть, как он находится в html-файле).

После добавления атрибута «rel».

<ul class="group" id="example-one"> 
      <li class="current_page_item"> 
       <a href="#" rel="#C6AA01">Home</a> 
      </li> 
      <li><a rel="#fe4902" href="#">Buy Tickets</a></li> 
      <li><a rel="#A41322" href="#">Group Sales</a></li> 
      <li><a rel="#C6AA01" href="#">Reviews</a></li> 
      <li><a rel="#900" href="#">The Show</a></li> 
      <li><a rel="#D40229" href="#">Videos</a></li> 
      <li><a rel="#1B9B93" href="#">Photos</a></li> 
      <li><a rel="#8DC91E" href="#">Magic Shop</a></li> 
</ul>

затем перейдите в свой файл css и удалите свойство цвета фона. если вы не удалите этот фоновый цвет, будет создана анимация перехода цвета из цвета фона «# magic-line» в значение «rel». , согласно вашему требованию, обязательно удалите его.

CSS

#magic-line { 
    position: absolute; 
    bottom: -2px; 
    left: 0; 
    width: 100px; 
    height: 2px; 
    //background: #fe4902; - remove this. 
}

В файле JQuery пожалуйста, обновите этот код:

$magicLine 
     .width($(".current_page_item").width()) 
     .css("left", $(".current_page_item a").position().left) 
     .data("origLeft", $magicLine.position().left) 
     .data("origWidth", $magicLine.width()) 
    // add below code 
    .data("origColor", $(".current_page_item a").attr("rel")); 

$("#example-one li").find("a").hover(function() { 
     $el = $(this); 
     leftPos = $el.position().left; 
     newWidth = $el.parent().width(); 

     $magicLine.stop().animate({ 
      left: leftPos, 
      width: newWidth, 

     // add below code 
     backgroundColor: $el.attr("rel")   
     }); 
    }, function() { 
     $magicLine.stop().animate({ 
      left: $magicLine.data("origLeft"), 
      width: $magicLine.data("origWidth"), 

      // add below code 
      backgroundColor: $magicLine.data("origColor") 

     });  
    }); 

    $(".current_page_item a").mouseenter();

источник

2013-06-13 12:33:23

спасибо :) его работа прекрасна .. я получил свое решение ... большое спасибо ... – kinjal

Вы должны иметь атрибут каждого a тега, который собирается быть цвет границы rel:

<ul class="group" id="example-one"> 
    <li class="current_page_item"><a href="#" rel="#fe4902">Home</a></li> 
    <li><a rel="#fe4902" href="#">Home</a></li> 
    <li><a rel="#A41322" href="#">Buy Tickets</a></li> 
    <li><a rel="#C6AA01" href="#">Group Sales</a></li> 
    <li><a rel="#D40229" href="#">The Show</a></li> 
    <li><a rel="#98CEAA" href="#">Videos</a></li> 
    <li><a rel="#1B9B93" href="#">Photos</a></li> 
    <li><a rel="#8DC91E" href="#">Magic Shop</a></li> 
</ul>

Затем вам нужно, чтобы сохранить исходное значение цвета.

Так после того, как вы получите OrigWidth из $magicLine, вам нужно

.data("origColor", $('.current_page_item a').attr("rel"));

О функции парения вам нужно получить значение атрибута rel для элемента вы зависший над.

 backgroundColor: $el.attr("rel")

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

 backgroundColor : $magicLine.data("origColor")

источник

2013-06-13 11:18:21

Как анимировать jquery MagicLine Навигация с другим цветом нижней границы

ответ

Смежные вопросы