当一个悬停在上面时，jQuery 淡化/变暗其他列表元素，我在那里 90%..？答案

【问题标题】：jQuery fading/dimming other list elements when one is hovered over, I'm 90% there..?当一个悬停在上面时，jQuery 淡化/变暗其他列表元素，我在那里 90%..？
【发布时间】：2009-04-17 12:49:54
【问题描述】：

我有一个无序列表，大概有 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
});

*显然这是在 $(document).ready(function()

中

谁能帮帮我？

非常感谢

【问题讨论】：

你能提供一个包含这段代码的测试页面吗？
在jsbin.com 上设置示例页面，将其保存到公共 URL，然后在您的问题中链接到它
我现在就在jsbin上设置一下，谢谢。
我已经在 jsbin 上设置好了，这里是链接：jsbin.com/uhilaCheers 伙计们
如果有一个可以帮助那些追随你的人，你应该选择一个正确的答案。

标签： jquery hover fade wait

【解决方案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>

【讨论】：

看来你已经帮我完成了，谢谢。我想我会在 jsbin jsbin.com/uhila 上向您展示我当前的设置供您参考。我现在会处理你的答案，谢谢。
我已经使用了您的答案，并且效果很好。太感谢了。当网站上线时，我会通知你，你会看到你得心应手的工作。干杯

【解决方案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)
  })

})

【讨论】：

确实，stop 方法在这里应该可以帮到你很多。

【解决方案3】：

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

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

【讨论】：

【解决方案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;

【讨论】：

【解决方案5】：

id 需要查看你的 html 以更好地理解这个问题，但是像这样的东西呢：

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

使用自定义插件会很容易 - 同样，id 需要查看 html。在没有看到它的情况下，或者至少是 html 的情况下，它可以吸收很多东西。

【讨论】：

【解决方案6】：

您已经很接近了，这应该很容易解决。在您的输出功能上，首先检查鼠标是否完全离开了 UL。如果有，则处理您的淡入。如果没有，则保持淡入，并简单地更改您离开的 li 和您正在输入的 li 的淡入。

【讨论】：

【解决方案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;
}

【讨论】：