jQuery Hover Effect for NavBar nie działa?

Question

Z jakiegoś powodu, po prostu nie może uzyskać efekt aktywowania pracować
HTML:

<div id="navbarcontainer"> 
    <ul> 
     <li id="left" class="current"> 
      <a id="current">Home</a></li> 
     <li class="dependant1"> 
      <a id="dependant1">Services</a></li> 
     <li id="right" class="dependant2"> 
      <a id="dependant2">Contact</a></li> 
    </ul> 
</div> 

CSS:

#navbarcontainer { 
margin: 0; 
padding: 0; 
height: 50px; 
background: #01216D; 
} 

#navbarcontainer ul { 
    clear: both; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

#navbarcontainer li { 
    display: inline-block; 
    height: 50px; 
    width: 100px; 
    list-style: none; 
    text-align: center; 
    -moz-transition: .5s; 
    -o-transition: .5s; 
    -webkit-transition: .5s; 
    transition: .5s; 
    /* Firefox 4 */ 
    /* Opera */ 
    /* Safari and Chrome */ 
} 

    #navbarcontainer ul li a { 
     text-decoration: none; 
     line-height: 50px; 
     width: 100px; 
     font-size: 20px; 
     font-family: Calibri; 
     cursor: pointer; 
    } 

#left { 
    margin-right: 40px; 
    margin-left: 20px; 
} 

#right { 
    margin-left: 40px; 
} 

.current { 
    background: #fff; 
} 

#current { 
    color: #01216D; 
font-weight: bold; 
} 

#dependant1, #dependant2 { 
    color: #fff; 
} 

jQuery:

$("#dependant1").hover(function() { 
    $('.dependant1').stop().animate({background: '#fff' }, "slow"); 
    $('#dependant1').stop().animate({color: '#01216D', 'font-weight': 'bold'}, "slow"); 
}, function() { 
    $('.dependant1').stop().animate({ background: 'none' }, "slow"); 
    $('#dependant1').stop().animate({color: '#fff', 'font-weight': 'normal'}, "slow"); 
}); 

mam ochoty ma coś wspólnego z jQuery, ale mam go w pliku document.load, więc nie rozumiem, dlaczego to nie działa.

Answer 1

Trzeba to po jQueryjQuery UI Library:

LIVE DEMO

$("#navbarcontainer li").hover(function() { 
    $(this).find('a').stop().animate({ color: '#01216D', backgroundColor: '#fff'}, 800); 
}, function() { 
    $(this).find('a').stop().animate({ color: '#fff', backgroundColor: '#01216D'}, 800); 
}); 

HTML:

<div id="navbarcontainer"> 
    <ul> 
     <li><a id="current">Home</a></li> 
     <li><a>Services</a></li> 
     <li><a>Contact</a></li> 
    </ul> 
</div> 

CSS:

#navbarcontainer { 
    margin: 0; 
    padding: 0; 
    background: #01216D; 
} 
#navbarcontainer ul { 
    clear: both; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    overflow:hidden; 
} 
#navbarcontainer li { 
    list-style: none; 
    text-align: center; 
    -moz-transition: .5s; 
    -o-transition: .5s; 
    -webkit-transition: .5s; 
    transition: .5s; 
} 
#navbarcontainer ul li a { 
    float:left; 
    color:#fff; 
    background: #01216D; 
    padding:10px 30px; 
    text-decoration: none; 
    line-height: 50px; 
    font-size: 20px; 
    font-family: Calibri; 
    cursor: pointer; 
} 
#current { 
    background: #fff !important; 
    color: #01216D !important; 
    font-weight: bold; 
} 

Albo inny scenariusz:

$("#navbarcontainer li").on('mouseenter mouseleave',function (e) { 
    var set = e.type=='mouseenter' ? {c:"#01216D", bg:"#fff"} : {c:"#fff", bg:"#01216D"} ; 
    $('a', this).stop().animate({ color: set.c, backgroundColor: set.bg}, 800); 
}); 

Answer 2

Spróbuj tego w CSS znacznika

#navbarcontainer ul li a { 

     display: block; 
     height: 50px; 

     text-decoration: none; 
     line-height: 50px; 
     width: 100px; 
     font-size: 20px; 
     font-family: Calibri; 
     cursor: pointer; 
    } 

Answer 3

można dodawać efekty przesuwania Aby elementów z CSS pseudo-klasy hover. Dodanie tego stylu do pliku CSS zastosowano czerwone tło do li przy aktywowaniu:

li.dependant1:hover { 
    background-color: red; 
} 

http://jsfiddle.net/xuHjJ/

Answer 4

Starasz animowanie kolor tła i kolor tekstu, który nie można zrobić z jQuery sam . Aby osiągnąć to, co chcesz zrobić powyżej w swoim opisie, musisz dołączyć wtyczkę animacji kolorów, która jest available here.

Po dodaniu, że jesteś kod powinien działać zgodnie z oczekiwaniami.

EDIT

proszę zobaczyć Fiddle example z wtyczką włączone.

$('#color').on('click',function(){ 
    $(this).animate({backgroundColor:'#400101', color:'#fff'}); 
}); 

Answer 5

Musisz library to animate color z jQuery i trzeba animowanie nie background-kolor tła, a kiedy zanika z powrotem do Ciebie trzeba znikną z powrotem do niebieskiego, a nie żaden.

Ten js skrzypce pokazuje swoją pracę Demo: http://jsfiddle.net/Mbppv/

Oto co zmieniłem swoje js do:

$("#dependant1").hover(function() { 
    $('.dependant1').stop().animate({"background-color": '#fff' }, "slow"); 
    $('#dependant1').stop().animate({color: '#01216D', 'font-weight': 'bold'}, "slow"); 
}, function() { 
    $('.dependant1').stop().animate({"background-color": '#01216D' }, "slow"); 
    $('#dependant1').stop().animate({color: '#fff', 'font-weight': 'normal'}, "slow"); 
}); 

także zobaczyć ten związany post animowanie kolor: jQuery animate backgroundColor