jQuery Hover Effect for NavBar not working?

Question

For some reason, I just can't get the hover effect to work
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");
});

I feel like it has something to do with the jQuery, but I have it in the document.load, so I don't understand why it isn't working.

The jQuery code shown was just a test to try the hover effect, so I know it would only work on one link — Karmaxdw, Apr 05 '13 at 15:45
you cannot animate `color` and `background` with just jQuery, use jQuery UI — Roko C. Buljan, Apr 05 '13 at 15:48

Roko C. Buljan · Accepted Answer · 2013-06-01T02:12:05.350

You need to include after jQuery the 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;
}

Or another 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);
});

This wouldn't have worked as roXon and vletech explained. Needed additional jQuery files not included in the original download. — Karmaxdw, Apr 05 '13 at 16:05

score 1 · Answer 2 · answered Apr 05 '13 at 15:49

1

Try this in your a 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;
    }

answered Apr 05 '13 at 15:49

Daniel

4,816
3
27
31

Did you check out @roXon his/her comment. That is valid. – Daniel Apr 05 '13 at 15:52
Yeah, I'm testing it out now. – Karmaxdw Apr 05 '13 at 15:55

score 1 · Answer 3 · answered Apr 05 '13 at 15:54

1

You're trying to animate the background color and text color which you can't do with jQuery alone. To achieve what you're trying to do above in your description you need to include the color animation plugin which is available here.

After you have included that you're code should work as expected.

EDIT

Please see this Fiddle example with the plugin included.

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

answered Apr 05 '13 at 15:54

dev

3,969
3
24
36

I added jQuery UI 1.10.2 and it fixed part of the problem. Just playing around with it now, thank you. – Karmaxdw Apr 05 '13 at 15:58
Sorry yes I forgot to mention it also works with UI. Glad you got it all working now – dev Apr 05 '13 at 16:00
Thanks! Thought I was coding something wrong, didn't realize jQeuery needed help haha. – Karmaxdw Apr 05 '13 at 16:04

score 1 · Answer 4 · edited May 23 '17 at 12:13

You need a library to animate color with jQuery and you need to animate background-color not background and when fading back to you need to fade back to blue, not none.

This js fiddle shows your demo working: http://jsfiddle.net/Mbppv/

Here is what I've changed your js to:

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

Also see this related post on animating colour: jQuery animate backgroundColor

score 0 · Answer 5 · answered Apr 05 '13 at 15:53

0

You can add hover effects to elements with the CSS pseudo-class hover. Adding this style to your CSS file applied a red background to the li on hover:

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

http://jsfiddle.net/xuHjJ/

answered Apr 05 '13 at 15:53

Bucket

7,415
9
35
45

I figured I could do it with CSS, but I thought it would be smoother with jQuery. Will run with CSS for now, thanks. – Karmaxdw Apr 05 '13 at 15:54
1

You can add CSS transition to create an animated effect http://www.w3schools.com/css3/css3_transitions.asp – Daniel Apr 05 '13 at 15:55
While jQuery would work, this is probably the simpler (and more feasible) solution. jQuery is better saved for the more complicated stuff. In the end, it's really whatever floats your boat, but I swear by Occam's razor on this one. :) – Bucket Apr 05 '13 at 20:13

jQuery Hover Effect for NavBar not working?

5 Answers5