Hiệu ứng jQuery Hover cho NavBar không hoạt động?

Question

Đối với một số lý do, tôi chỉ không thể có được hiệu ứng di chuột để làm việc
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"); 
}); 

tôi cảm thấy như nó có một cái gì đó để làm với jQuery, nhưng tôi có nó trong document.load, vì vậy tôi không hiểu tại sao nó không hoạt động.

Answer 1

Bạn cần phải bao gồm sau jQuery các 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; 
} 

Hoặc kịch bản khác:

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

Hãy thử điều này trong một thẻ CSS của bạn

#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

Bạn có thể thêm các hiệu ứng di chuột vào phần tử có CSS ​​pseudo-class hover. Thêm phong cách này để tập tin CSS của bạn áp dụng một nền đỏ với li trên di chuột:

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

http://jsfiddle.net/xuHjJ/

Answer 4

Bạn đang cố gắng để biến đổi màu nền và màu văn bản mà bạn không thể làm với jQuery một mình . Để đạt được những gì bạn đang cố gắng làm ở trên trong mô tả của bạn, bạn cần bao gồm plugin hoạt ảnh màu là available here.

Sau khi bạn đã bao gồm mã, bạn sẽ hoạt động như mong đợi.

EDIT

Xin xem Fiddle example này với các plugin bao gồm.

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

Answer 5

Bạn cần một library to animate color với jQuery và bạn cần phải làm động background-color không nền và khi mờ dần trở lại với bạn cần phải mờ dần trở lại màu xanh, không ai sánh kịp.

này js fiddle cho thấy làm việc giới thiệu của bạn: http://jsfiddle.net/Mbppv/

Dưới đây là những gì tôi đã thay đổi js của bạn để:

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

Cũng xem bài này có liên quan về hiệu ứng động màu: jQuery animate backgroundColor