jQuery Hover Effect pour NavBar ne fonctionne pas?

Question

Pour une raison quelconque, je ne peux pas obtenir l'effet de vol stationnaire pour travailler
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"); 
}); 

Je me sens comme ça a quelque chose à voir avec le jQuery, mais je l'ai dans le document.load, donc je ne comprends pas pourquoi ça ne marche pas.

Answer 1

Vous devez inclure après le 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; 
} 

Ou un autre 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

Essayez dans votre une balise 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

Vous pouvez ajouter des effets de vol stationnaire à des éléments avec la pseudo-classe CSS hover. L'ajout de ce style à votre fichier CSS appliqué un fond rouge au li sur le vol stationnaire:

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

http://jsfiddle.net/xuHjJ/

Answer 4

Vous essayez d'animer la couleur de fond et la couleur du texte que vous ne pouvez pas faire avec jQuery seul . Pour réaliser ce que vous essayez de faire ci-dessus dans votre description, vous devez inclure le plugin animation couleur qui est available here. Après avoir inclus que votre code devrait fonctionner comme prévu.

EDIT

S'il vous plaît voir ce Fiddle example avec le plug-in inclus.

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

Answer 5

Vous avez besoin d'un library to animate color avec jQuery et vous avez besoin pour animer background-color pas d'arrière-plan et quand la décoloration de nouveau à vous devez effacer retour au bleu, sans aucune.

Ce js violon montre votre travail de démonstration: http://jsfiddle.net/Mbppv/

Voici ce que j'ai changé vos js à:

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

Voir aussi ce poste lié à l'animation couleur: jQuery animate backgroundColor