当一个人徘徊时,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
});

*显然这是在$(文件).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>