jQuery褪色/调暗其他列表元素当一个人徘徊时，我90％那里..？

我有一个无序列表，可能有30个项目。 当其中一个项目hover在上面时，其余的列表项目会淡化到30％，而hover的项目会保持在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 }); 

*显然这是在$（文件）.ready（function（）

有人可以帮我吗？

非常感谢

Answer 1

这听起来很有趣，所以我实现了它。 从外观上看，您的css选择器可以简化。 我认为你只希望最顶层的列表项淡入淡出，但从示例中不清楚。 此示例突出显示最顶层节点并正确执行淡入淡出。 我认为这是你想要的效果，但我不是百分百肯定。 我没有使用wait（）function，因为我不确定它对你做了什么。

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

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

修补示例： http ： //jsbin.com/usobe/edit

 
 
 site 1 
sub item 1
sub item 2
sub item 3
 
 site 2 
sub item 1
sub item 2
sub item 3
 
 site 3 
sub item 1
sub item 2
sub item 3
 
 site 4 
sub item 1
sub item 2
sub item 3
 
 site 5 
  

Answer 2

做这样的事情怎么样：
对它进行了简要测试，但我认为它可以达到你想要的效果。

 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

这是更简单的解决方案：

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

对于仅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 5

id需要看到你的html才能更好地理解这个问题，但是这样的事情怎么样：

在我看来，你的问题是你在列表中的每个项目上淡入淡出，你应该做的是：1）如果鼠标从整个列表中退出，在2）当用户从一个项目移动时淡出它到另一个项目，将鼠标hover在可见项目上，将其他项目淡化为不太明显。

使用自定义插件会很容易 – 再次，id需要查看html。 如果没有看到它，或者至少是html，它可以吸收很多东西。

Answer 6

你很亲密，这应该是一个简单的解决方案。 你的out函数检查首先看看鼠标是否完全离开了UL。 如果有，则处理你的淡入。如果没有，那么让它们褪色，只需改变你离开的李的褪色和你正在进入的李。

Answer 7

使用CSS非常容易。

看看这个http://jsfiddle.net/drjorgepolanco/ga5dy0tp/

HTML

 
 
 
Link 1
 
Link 2
 
Link 3
 
Link 4
 
  

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; }