当鼠标悬停在一个列表元素上时，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
});

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

有人可以帮我吗？

非常感谢

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>