jQuery Hover Effect per NavBar non funziona?

Question

Per qualche ragione, non riesco proprio a ottenere l'effetto hover di lavorare
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"); 
}); 

ne ho voglia ha qualcosa a che fare con il jQuery, ma ce l'ho nel document.load, quindi non capisco perché non funzioni.

Answer 1

è necessario includere dopo jQuery la jQuery 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; 
} 

Oppure un altro script:

$("#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

Prova questo nel vostro un tag CSS

#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

È possibile aggiungere effetti al passaggio del mouse per gli elementi con il CSS pseudo-classe hover. L'aggiunta di questo stile al vostro file CSS applicato uno sfondo rosso al li al passaggio del mouse:

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

http://jsfiddle.net/xuHjJ/

Answer 4

Stai cercando di animare il colore di sfondo e il testo che non si può fare con jQuery da solo . Per ottenere ciò che stai cercando di fare sopra nella tua descrizione, devi includere il plug-in di animazione del colore che è available here.

Dopo aver incluso che il codice dovrebbe funzionare come previsto.

EDIT

consulta questo Fiddle example con il plugin incluso.

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

Answer 5

Hai bisogno di un library to animate color con jQuery ed è necessario animare Non background-colore di sfondo e quando dissolvenza di nuovo voi bisogno di svanire di nuovo al blu, non è nessuno.

Questo js violino mostra il vostro lavoro demo: http://jsfiddle.net/Mbppv/

Ecco quello che ho cambiato la vostra js a:

$("#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"); 
}); 

vedere anche questo post correlati sul colore che anima: jQuery animate backgroundColor