jQuery淡入淡出/淡化其他列表元素，当我有一个悬停时，我在那里90％..？

Question

我有一个无序列表，其中可能有30个项目。当这些物品中的一个悬停时，剩余的物品将褪色至30％，而悬挂物品则保持100％。当你从列表中移开时，它们都会褪去100％，我已经管理好了。

当您从一个项目移动到另一个项目时，其他列表项会逐渐回退到100％，然后回落到30％。除非用户离开整个列表，否则我希望他们保持在30％。

我在每个列表项上使用hoverIntent插件。我还用jQuery为当前列表项添加一个类，这样我就可以淡化剩下的东西，并在你离开时删除它。我在jQuery Cookbook站点上使用了一个等待函数（http://docs.jquery.com/Cookbook/wait）

你能找到我吗？

这里是我到目前为止的代码：

$.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 
}); 

*显然，这是一个$（文件）。就绪内（函数（）

谁能帮我请

非常感谢

Answer 1

这听起来很有趣，所以我实现了它。从外观上看，你的CSS选择器可以简化。我认为你只想让最上面的列表项淡入淡出，但是从这个例子中不清楚。本示例突出显示了最上面的节点并正确进行了衰减。我认为这是你要去的效果，但我不是100％肯定的。我没有使用wait（）功能，因为我不确定它对你的功能。

从本质上讲，它听起来像是你遇到的问题是，当你还没有离开列表时，你正在淡入物品。当您完全离开列表时，您只想淡入列表或其他列表项目。不要对该部分使用hoverIntent，并处理整个无序列表上的淡入淡出，应该很好。

的例子：http://jsbin.com/usobe

鼓捣出的例子：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

ID需要看你的HTML，以便更好地理解这个问题，但对于这样的事情：

在我看来，你的问题在于你在列表中的每个项目上淡入淡出，你应该做的是： 1）如果从整个列表中滑出，将其淡入 2）作为用户从一个项目移动到另一个项目，将鼠标悬停的项目淡化为可见，其他项目不可见。

这将很容易与自定义插件 - 再次，ID需要看到的HTML。如果没有看到它的存在，或者至少是html，那么它就会变得很重要。

Answer 3

你很近，这应该是一个简单的修复。在您的外出功能检查首先看鼠标是否完全离开UL。如果有，然后处理你的淡入。如果没有，那么让它们消失，并简单地改变你离开的李和你正在进入的李的褪色。

Answer 4

如何做这样的事情：
测试它虽然简短，但是我认为它达到你正在寻找的效果。

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 5

这里是更简单的解决方案：

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

Answer 6

对于只CSS的解决方案：

$('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; } 

只要确保你已经应用到您的元素的过渡，如：

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

Answer 7

这对于CSS来说非常简单。

看看这个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; 
} 

添加过渡到列表中的元素，使它看起来更漂亮......

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