Cannot generate a jQuery fadeIn/fadeOut on a tab hover state

Question

Just to set the scene, I'm inexperienced when it comes to jQuery (but not web design) so I'll appreciate some assistance here!

Basically, I'm trying to get the hover states on my navigation bar to fade in (on the hover) and fade out (on the mouse off). It's a simple navigation bar, no images, just pseudo selectors doubled up as classes so that jQuery can actually pick up the CSS okay.

I've tried a number of scripts but I can't seem to find what I'm looking for. The code is simple, the solution is simple yet I'm having absolutely no luck so here we go.

HTML:

<ul>
    <li><a class = "tab selected" href = "index.html">home</a></li>
    <li><a class = "tab" href = "portfolio.html">portfolio</a></li>
    <li><a class = "tab" href = "index.html">contact</a></li>
</ul>

CSS:

nav ul li a.tab { 
    display: inline-block; 
    padding: 15px 20px; 
    min-width: 40px; 
}   

nav ul li a.tab:link, nav ul li a.tab.link { 
    padding: 15px 20px; 
    color: #656359; 
    text-align: center; 
}

nav ul li a.tab:visited, nav ul li a.tab.visited { color: #656359; }

nav ul li a.tab:hover, nav ul li a.tab.hover { 
    padding: 15px 20px; 
    background-color: #d5d1bc; 
}

nav ul li a.tab:active, nav ul li a.tab.active { color: #901f78; }

jQuery:

$('.tab.hover').hover(
    function(){
        $(this).fadeIn();
    }, 
    function(){
        $(this).fadeOut();
    }        
);

I've attempted to use the mouseover/mouseout functions as well but no luck. I'm just getting no change at all in browser. My jQuery file is hooked up properly as well.

It's an unoriginal post but after 2 days of research, I'm out of ideas so thanks in advance!

score 2 · Answer 1 · answered Sep 22 '12 at 23:48

2

This can be done with CSS3.

You set the background transition of the items to ease in and out by putting the following CSS in the tab class:

transition: background .5s ease-in-out;
-moz-transition: background .5s ease-in-out;
-webkit-transition: background .5s ease-in-out;

You can change the fade time by changing the value of the second parameter (.5s is 0.5 seconds)

Working Example: http://jsfiddle.net/BGKyp/1/

answered Sep 22 '12 at 23:48

Timm

12,553
4
31
43

Thanks Timm, that's a really tidy solution and degrades gracefully too I imagine. I am still hoping to crack the jQuery route for this but I'll definitely keep this in mind! – user1691585 Sep 23 '12 at 08:22
The reason your code or the other answer's code would not work is because it is fading in/out the actual list element, not just the hover 'class'. You can't fade in a newly added class without this CSS3 because a class isn't actually an object, it just tells the object what to look like. For a jQuery solution the unhackiest way would be to use jQuery UI or the jQuery color plugin, and animate in the background color with `.animate` http://stackoverflow.com/a/967896/1130734 – Timm Sep 23 '12 at 09:22
Great stuff. I've been beginning to think invoking a class just doesn't work like you say. I'm guessing that's why so many of these hover/fade in problems always involve hiding/showing elements already on the page. I've just needed someone to tell me that so thanks for that and the tip on the colour plugin! – user1691585 Sep 23 '12 at 09:30

prashanth · Answer 2 · 2012-09-23T09:16:23.517

0

Try something like this:

$(function(){
  $('.tab').parent().hover(
    function(){
        //$(this).find('.tab').stop().fadeIn();
        $(this).find('.tab').stop().fadeTo("fast",1);
    }, 
    function(){
        //$(this).find('.tab').stop().fadeOut(); //this sets display to 'none'; so we cant have hover events again; switch to 'fadeTo()' instead
        $(this).find('.tab').stop().fadeTo("fast",0.01);        
    }        
  );  
});

And CSS as below: (I am assuming your <ul> is inside a <nav>)

nav ul li{
    height: 40px;
}
nav ul li a.tab {  
    padding: 15px 20px; 
    min-width: 40px; 
}   

nav ul li a.tab:link, nav ul li a.tab.link { 
    color: #656359; 
    text-align: center; 
}

nav ul li a.tab:visited, nav ul li a.tab.visited { color: #656359; }

nav ul li a.tab:hover, nav ul li a.tab.hover { 
    background-color: #d5d1bc; 
}

edited Sep 23 '12 at 09:16

answered Sep 23 '12 at 00:04

prashanth

2,059
12
13

This is getting somewhere. The tabs are now actually fading for a start, however after each mouse over, the tabs disappear from the page. I tried replacing the hover function with the mouseover/mouseout and specifying the .hover class to fade in/out accordingly but no luck. – user1691585 Sep 23 '12 at 08:31
to understand better, can you show me a jsfiddle demo with this behavior? – prashanth Sep 23 '12 at 08:38
I have updated the answer to use fadeTo instead of fadeOut and fadeIn because of the problem expalined in the comment. And the updated demo is at http://jsfiddle.net/BnSXJ/2/ – prashanth Sep 23 '12 at 09:17
Sorry I missed that comment up there! That's working now, although I need to retain the tab visibility at all times. Should I therefore be hiding the elements on the page rather than calling them in? – user1691585 Sep 23 '12 at 09:34

Cannot generate a jQuery fadeIn/fadeOut on a tab hover state

2 Answers2