jQuery fading/dimming other list elements when one is hovered over, I'm 90% there..?

Question

I have an unordered list, which has maybe 30 items. When one of these items are hovered over, the rest of the list items fade to 30% and the hovered item stays at 100%; when you move away from the list, they all fade back up to 100% and I have managed this.

My problems arises when you move from item to item, the other list items fade back up to 100% and then back down to 30%. I want them to stay at 30% unless the user moves away from the whole list.

I use the hoverIntent plugin on each list item. I also used jQuery to add a class to the current list item, so I could then fade the rest and remove it once you move away. I have used a wait function found on the jQuery Cookbook site (http://docs.jquery.com/Cookbook/wait)

Do you get me?

Here's my code so far:

$.fn.wait = function(time, type) {
    time = time || 300;
    type = type || "fx";
    return this.queue(type, function() {
        var self = this;
        setTimeout(function() {
            $(self).dequeue();
        }, time);
    });
};

$("#sites li:not(#sites li li)").hoverIntent(function(){
    $(this).attr('class', 'current'); // Add class .current
    $("#sites li:not(#sites li.current,#sites li li)").fadeTo("slow", 0.3); // Fade other items to 30%
    },function(){
    $("#sites li:not(#sites li.current,#sites li li)").wait().fadeTo(600, 1.0); // This should set the other's opacity back to 100% on mouseout
    $(this).removeClass("current"); // Remove class .current
});

*Obviously this is within a $(document).ready(function()

Can anyone help me please?

Many thanks

Answer 1

This sounded like fun, so I implemented it. From the looks of things, your css selector can be simplified. I think you only want the topmost list item to fade in and out, but it's not clear from the example. This example highlights the topmost node and does the fading correctly. I think this is the effect you were going for, but I'm not 100% sure. I didn't use the wait() functionality, as I'm not sure what it does do you.

Essentially, it sounds like the problem you are running into is that you are fading items in on hover out when you haven't left the list yet. You only want to fade in the list or other list items when you've entirely left the list. Don't use hoverIntent for that part, and handle the fading on the entire unordered list and it should be good to go.

The example: http://jsbin.com/usobe

Tinker with the example: http://jsbin.com/usobe/edit

<ul id="sites">
  <li> site 1
   <ul><li>sub item 1</li><li>sub item 2</li><li>sub item 3</li></ul>
  <li> site 2
   <ul><li>sub item 1</li><li>sub item 2</li><li>sub item 3</li></ul>  
  <li> site 3  
   <ul><li>sub item 1</li><li>sub item 2</li><li>sub item 3</li></ul>
  <li> site 4
   <ul><li>sub item 1</li><li>sub item 2</li><li>sub item 3</li></ul>  
  <li> site 5
</ul>    

<script>
$(function() {

$("#sites").hover(
     function() {}, 
     function() {        
       $('#sites>li').fadeTo("fast", 1.0); 
     }
);

$("#sites>li").hoverIntent(
    function(){
       $(this).attr('class', 'current'); // Add class .current
       $(this).siblings().fadeTo("fast", 0.3); // Fade other items to 30%
       $(this).fadeTo("slow", 1.0); // Fade current to 100%

    },
    function(){            
      $(this).removeClass("current"); // Remove class .current
      $(this).fadeTo("fast", 1.0); // This should set the other's opacity back to 100% on mouseout   
    });
});

</script>

Answer 2

How about doing something like this:
Tested it briefly but I think it achieves the effect you are looking for.

jQuery(function($){
  var $ul = $("ul#sites")

  $ul.hover(function(){
    $("li", $ul).stop().fadeTo("fast", 0.3)

    $("li", $ul).hover(function(){
        $(this).stop().fadeTo("fast", 1.0)
    },function(){
        $(this).stop().fadeTo("fast", 0.3)
    })
  },function(){
    $("li", $ul).stop().css("opacity", 1.0)
  })

})

Answer 3

Here is more simple solution:

$("ul#sites > li").fadeTo("fast", 0.3);
$("ul#sites > li").hover(
    function() { $(this).fadeTo("fast", 1.0); },
    function() { $(this).fadeTo("fast", 0.3); }
);

Answer 4

For a CSS-only solution:

$('a.leaders').hover(function() {
    $(this).addClass('hovered');
    $('a.leaders').not('.hovered').addClass('nothovered');
}, function() {
    $('a.leaders').removeClass('nothovered hovered');
});

a.leaders.hovered { opacity:1; }
a.leaders.nothovered { opacity:0.6; }

Just make sure you have a transition applied to your element, like:

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

Answer 5

id need to see your html to better understand this problem, but what about something like this:

it seems to me that your problem is that you are fading in and out on EACH item in your list, what you should be doing is: 1) if mouse out from the WHOLE list, fade it in 2) as user moves from one item to another item, fade the mouse-over item to visible, others to less visible.

this would be easy with a custom plugin - again, id need to see the html. its a lot to take in without seeing it live, or atleast the html.

Answer 6

You are close, and this should be an easy fix. on your out function check to see first if the mouse has left the UL entirely. If it has, then process your fade in. If it hasn't then keep them faded and simply change the fading of the li you left and the li you are entering.

Answer 7

This is so easy to do with CSS.

Take a look at this http://jsfiddle.net/drjorgepolanco/ga5dy0tp/

html

<div id="main-nav">
    <ul>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
        <li>Link 4</li>
    </ul>
</div>

css

 #main-nav ul {
    list-style: none;
 }

 #main-nav ul:hover li {
    opacity: 0.2;
 }

 #main-nav ul:hover li:hover {
    opacity: 1;
 }

Add transition to the list elements to make it look prettier...

#main-nav ul li {
    transition: opacity 0.4s ease-out;
}