jQuery在淡入淡出/淡化其他列表元素时，我在那里90％..？ [英] jQuery fading/dimming other list elements when one is hovered over, I'm 90% there..?

问题描述

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

当你从一个项目移动到另一个项目时，出现了我的问题清单项目退回到100％，然后回落到30％。我希望他们能够保持在30％，除非用户离开整个列表。

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

您是否找到我？

到目前为止， p>

  $。fn.wait = function（time，type）{
 time = time || 300; 
 type = type || FX; 
 return this.queue（type，function（）{
 var self = this; 
 setTimeout（function（）{
 $（self）.dequeue（）; 
}，时间）; 
}）; 
}; 
 
 $（＃sites li：not（#sites li li））。hoverIntent（function（）{
 $（this）.attr（'class'，'current'） ; //添加class .current 
 $（＃sites li：not（#sites li.current，＃sites li li））。fadeTo（slow，0.3）; //淡入其他项目为30 （），
}，function（）{
 $（＃sites li：not（#sites li.current，＃sites li li））。wait（）。fadeTo（600,1.0） /这应该在mouseout 
 $（this）.removeClass（current）; //删除class .current 
}）中设置另一个的不透明度为100％ 
  

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

任何人都可以帮助我吗？

非常感谢

解决方案

这听起来很有趣，所以我实现了它。从外观上看，你的css选择器可以简化。我认为你只希望最上面的列表项淡入淡出，但是不清楚这个例子突出显示了最顶层的节点并且正确地进行了淡入淡出，我认为这是你要做的效果，但是我不是100％肯定的，我没有使用wait（）函数，我不确定它对你有什么影响。

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

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

修补程序与示例： http://jsbin.com/usobe/edit

 < ul id =sites> ; 
< li>网站1 
< li>< li>子项目1< / li>< li>子项目2< / li>< li>子项目3< / li>< / ul> 
< li>网站2 
< li>< li>子项目1< / li>< li>子项目2< / li>< li>子项目3< / li>< / ul> 
< li>网站3 
< ul>< li>子项目1< / li>< li>子项目2< / li>< li>子项目3< / li>< / ul> 
< li>网站4 
< li>< li>子项目1< / li>< li>子项目2< / li>< li>子项目3< / li>< / ul> 
< li>网站5 
< / ul> 
 
< script> 
 $（函数（）{
 
 $（＃sites）。hover（
函数（）{}，
函数（）{
 $（'＃sites> li'）。fadeTo（fast，1.0）; 
} 
）; 
 
 $（＃sites> li）。hoverIntent 
函数（）{
 $（this）.attr（'class'，'current'）; //添加类.current 
 $（this）.siblings（）。fadeTo（快速，0.3）; //淡化其他项目到30％
 $（this）.fadeTo（slow，1.0）; //淡入淡出到100％
 
}，
函数（）{
 $（this）.removeClass（current）; //删除类.current 
 $（this）.fadeTo（fast，1.0）; // This应该将鼠标悬停的另一个不透明度设置回100％; 
}）; 
 
< / script> 
  

I have an unordered list, which has maybe 30 items. When one of these items are hovered over, the rest of the list items fade to 30% and the hovered item stays at 100%; when you move away from the list, they all fade back up to 100% and I have managed this.

My problems arises when you move from item to item, the other list items fade back up to 100% and then back down to 30%. I want them to stay at 30% unless the user moves away from the whole list.

I use the hoverIntent plugin on each list item. I also used jQuery to add a class to the current list item, so I could then fade the rest and remove it once you move away. I have used a wait function found on the jQuery Cookbook site (http://docs.jquery.com/Cookbook/wait)

Do you get me?

Here's my code so far:

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

*Obviously this is within a $(document).ready(function()

Can anyone help me please?

Many thanks

解决方案

This sounded like fun, so I implemented it. From the looks of things, your css selector can be simplified. I think you only want the topmost list item to fade in and out, but it's not clear from the example. This example highlights the topmost node and does the fading correctly. I think this is the effect you were going for, but I'm not 100% sure. I didn't use the wait() functionality, as I'm not sure what it does do you.

Essentially, it sounds like the problem you are running into is that you are fading items in on hover out when you haven't left the list yet. You only want to fade in the list or other list items when you've entirely left the list. Don't use hoverIntent for that part, and handle the fading on the entire unordered list and it should be good to go.

The example: http://jsbin.com/usobe

Tinker with the example: 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>

这篇关于jQuery在淡入淡出/淡化其他列表元素时，我在那里90％..？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！